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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 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
文件上传程序的全部源码
2006/10/09 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
python实现随机加减法生成器
2020/02/24 Python
python实现126邮箱发送邮件
2020/05/20 Python
幼儿园教师请假制度
2014/01/16 职场文书
勾股定理课后反思
2014/04/26 职场文书
世博会口号
2014/06/20 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
机关保密工作承诺书
2015/05/04 职场文书
歌剧魅影观后感
2015/06/05 职场文书
污染环境建议书
2015/09/14 职场文书
党风廉政建设心得体会
2019/05/21 职场文书