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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现简单聊天室
Feb 08 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
为数据添加append,remove功能
2006/10/03 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JS前端笔试题分析
2016/12/19 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python中spy++的使用超详细教程
2021/01/29 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
汽车广告策划方案
2014/05/31 职场文书
工作收入住址证明
2014/10/28 职场文书
表扬信范文
2015/05/04 职场文书
关于迟到的检讨书
2015/05/06 职场文书
小时代观后感
2015/06/10 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript