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 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现动态操作table行
Nov 23 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中copy on write写时复制机制介绍
2014/05/13 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
一个实用的php验证码类
2017/07/06 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python实现五子棋小游戏
2020/03/25 Python
python3中property使用方法详解
2019/04/23 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
网络技术支持面试题
2013/04/22 面试题
.net C#面试题
2012/08/28 面试题
应届医学毕业生求职信分享
2013/12/02 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
找工作求职信
2014/07/07 职场文书
骨干教师考核评语
2014/12/31 职场文书
订货会邀请函
2015/01/31 职场文书
话题作文之学会尊重
2019/12/16 职场文书