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 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery中DOM操作原则实例分析
Aug 01 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日期时间函数的高级应用技巧
2009/05/16 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
jquery添加div实现消息聊天框
2020/02/08 jQuery
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python实现选择排序
2017/06/04 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python使用正则筛选信用卡
2019/01/27 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python画微信表情符的实例代码
2019/10/09 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
自我鉴定怎么写
2014/01/12 职场文书
设计师个人求职信范文
2014/02/02 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL