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 24 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 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 socket实现的聊天室代码分享
2014/08/16 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
密码框显示提示文字jquery示例
2013/08/29 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python表示矩阵的方法分析
2017/05/26 Python
python调用c++传递数组的实例
2019/02/13 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Django实现分页显示效果
2019/10/31 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
单位办理社保介绍信
2014/01/10 职场文书
美术教学感言
2014/02/22 职场文书
中等生评语大全
2014/05/04 职场文书
服务行业口号
2014/06/11 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
详解Java实践之建造者模式
2021/06/18 Java/Android
新手初学Java List 接口
2021/07/07 Java/Android