jquery实现tab键进行选择后enter键触发click行为

更新时间：2017年03月29日 09:58:55 作者：cl296894988

本文主要介绍了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
enter

jquery实现个人中心导航菜单效果和美观都非常不错
这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错
2014-09-09
Javascript中的Array数组对象详谈
这篇文章主要介绍了Javascript中的Array数组对象,需要的朋友可以参考下
2014-03-03
Tab页界面用jQuery及Ajax技术实现(php后台)
到了B/S开发时代，网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来，可以更充分发挥Tab页的良好表现力和数据缓存的优势，是一种良好的网页布局形式
2011-10-10
JS中Array数组学习总结
本文主要介绍了JS中Array数组的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
基于jquery DOM写的类似微博发布的效果
看了上个原生js DOM版的微博发布的效果，再来看看如何用jq写。看完代码，就会发现jq的强大，用更少的代码写更多的效果
2012-10-10
jquery复选框全选/取消示例
jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框，再点击取消所有复选框的选中状态
2013-12-12
jQuery ztree实现动态树形多选菜单
这篇文章主要介绍了jQuery ztree实现动态树形多选菜单，ztree动态树形菜单，初始化加载和延迟加载，感兴趣的小伙伴们可以参考一下
2016-08-08
jquery高效反选具体实现
反选想必大家都有一个比较独特的方法吧，下面与大家分享下利用jquery实现高效反选，具体代码如下感兴趣的朋友可以参考下哈
2013-05-05
jQuery如何解决IE输入框不能输入的问题
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入，怎么解决呢，下面小编给大家解答下
2016-10-10
checkbox使用示例
checkbox想必大家对这个控件并不陌生吧，毕竟在网页制作过程中经常会使用到，下面与大家分享个示例主要介绍checkbox的使用，感兴趣的朋友可以参考下
2013-08-08