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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
历史专业个人求职信分享
2013/12/20 职场文书
中学生寄语大全
2014/04/03 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
手机被没收的检讨书
2014/10/04 职场文书
考研英语辞职信
2015/05/13 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
800字作文之大雪
2019/12/04 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js