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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现简单QQ聊天框
Aug 27 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&amp;mysql(六)
2006/10/09 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
理解JavaScript原型链
2016/10/25 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
西班牙手机之家:Phone House
2018/10/18 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
ORACLE第二个十问
2013/12/14 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
竞选演讲稿范文
2013/12/28 职场文书
安全责任书怎么写
2014/07/28 职场文书
违纪检讨书
2015/01/27 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2016新年致辞
2015/08/01 职场文书