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查找dom的几种方法效率详解
May 17 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 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缓存技术介绍
2006/11/25 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
javascript里的条件判断
2007/02/27 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python程序慢的重要原因
2020/09/04 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
社团活动总结范文
2014/04/26 职场文书
作风转变心得体会
2014/09/02 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
初中作文评语
2014/12/25 职场文书
英文升职感谢信
2015/01/23 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
微信早安问候语
2015/11/10 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android