脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery enter键触发click行为

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实现动态添加标签事件

    jQuery实现动态添加标签事件

    这篇文章主要为大家详细介绍了jQuery实现动态添加标签事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 浅析bootstrap原理及优缺点

    浅析bootstrap原理及优缺点

    网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统
    2017-03-03
  • 基于jQuery实现表单提交验证

    基于jQuery实现表单提交验证

    本文给大家分享的是一段基于jQuery的实现简单的表单提交验证的代码，非常简单实用，推荐给有相同需求的小伙伴们参考下。
    2014-11-11
  • ajax请求data遇到的问题分析

    ajax请求data遇到的问题分析

    本篇文章为大家分析了在ajax进行数据请求的时候遇到的问题以及解决办法，一起参考学习下。
    2018-01-01
  • jQuery 筛选器简单操作示例

    jQuery 筛选器简单操作示例

    这篇文章主要介绍了jQuery 筛选器简单操作,结合实例形式详细分析了jQuery筛选器针对元素、字符串、属性等操作常见技巧与操作注意实行,需要的朋友可以参考下
    2019-10-10
  • jquery图片切换插件

    jquery图片切换插件

    本文给大家分享的是一则使用jQuery实现图片切换的插件，效果非常不错，兼容性也很好，推荐给大家，有需要的小伙伴快来参考下吧。
    2015-03-03
  • jquery验证表单中的单选与多选实例

    jquery验证表单中的单选与多选实例

    这里所说的，用jquery去验证某一组多选至少要有一个选中，某一组单选至少有一个选中，，大家都知道单一的一个用js比较好验证，但是想要用jquery的验证并且用到jquery验证的提示信息，那么这就不好办了
    2013-08-08
  • jQuery编写QQ简易聊天框

    jQuery编写QQ简易聊天框

    这篇文章主要为大家详细介绍了jQuery编写QQ简易聊天框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • jQuery 图像裁剪插件Jcrop的简单使用

    jQuery 图像裁剪插件Jcrop的简单使用

    目前做的这个项目中要用到用户头像功能，领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。
    2009-05-05
  • 利用jQuery实现滑动开关按钮效果（附demo源码下载）

    利用jQuery实现滑动开关按钮效果（附demo源码下载）

    这篇文章主要介绍了利用jQuery实现滑动开关按钮效果，文中给出了详细的介绍，并在文末给出了完整的demo源码下载，有需要的朋友可以参考简介，下面来一起看看吧。
    2017-02-02

最新评论