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日期范围选择器附源码下载
May 23 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery插件实现图片轮播效果
Oct 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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
js常用DOM方法详解
2017/02/04 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python跨文件使用全局变量的实现
2020/11/17 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
酒店经理职责
2014/01/30 职场文书
美容院营销方案
2014/03/05 职场文书
安全生产计划书
2014/05/04 职场文书
激励员工的口号
2014/06/16 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
工程主管竞聘书
2015/09/15 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
PHP实现两种排课方式
2021/06/26 PHP
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技