jquery实现tab键进行选择后enter键触发click行为


Posted in jQuery onMarch 29, 2017

这种使用场景为当首页有几个链接需要选择的时候,使用键盘就可以进行触发行为

复制下来放本地用吧 网页上直接测试有问题

效果图:

jquery实现tab键进行选择后enter键触发click行为

下面是demo代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>9</title>
 <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 <style type="text/css">
 .active{
  background: pink;
 }
 </style>
</head>
<body>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="aa(111)">111111111111111111</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="aa(2222)">222222222222222222</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="aa(3333)">333333333333333333333</a>
 <a class="active" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="aa(44444)">4444444444444444444444</a>
 <!-- <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >111111111111111</a> -->
 <!-- <script type="text/javascript">
 $("body").on("click",function(){
  var $active=$(".active");
  var index=$active.index();
  var totalLength=$("div").length;
  if (index==totalLength-1) {
  $($("div")[0]).addClass("active").siblings("div").removeClass("active");
  }else{
  $active.next().addClass("active").siblings("div").removeClass("active");
  }
 })
 </script> -->
 <script type="text/javascript">
 document.onkeydown=function(event){
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if(e && e.keyCode==9){ 
        // console.log(9999);
        var $active=$(".active");
  var index=$active.index();
  var totalLength=$("a").length;
  if (index==totalLength-1) {
   $($("a")[0]).addClass("active").siblings("a").removeClass("active");
  }else{
   $active.next().addClass("active").siblings("a").removeClass("active");
  }
        return false;
       }

       if(e && e.keyCode==13){ // enter 键
         var $active=$(".active");
         // var aa=$active.value;

         // $active.click(function(event) {
         // /* Act on the event */
         // });
         $active.trigger("click");
         // console.log(aa);
        // console.log(9999);

       }
    }; 
 </script>
 <!-- <script type="text/javascript">
 var $active=$(".active");
    var aa=$active.value;
    console.log(aa);

 </script> -->
 <script type="text/javascript">
 function aa(ss){
  alert(ss);
 }
 </script>
 <!-- <script type="text/javascript">
 var arr=[1,2,3];
 var index = Math.floor((Math.random()*arr.length)); 
 console.log(arr[index]);
 </script> -->
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery插件之validation插件
Mar 29 #jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
jQuery中的deferred使用方法
Mar 27 #jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
You might like
php实现购物车功能(上)
2020/07/23 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
javascript 中null和undefined区分和比较
2017/04/19 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
怎样声明子类
2013/07/02 面试题
网游商务专员求职信
2013/10/15 职场文书
大门门卫岗位职责
2013/11/30 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
部门2014年度工作总结
2014/11/12 职场文书
护士工作心得体会
2016/01/25 职场文书
windows安装python超详细图文教程
2021/05/21 Python
python之基数排序的实现
2021/07/26 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python