今天写一个案例：就是导航可以用数字键盘来监听，也就是点击数字键盘相应的导航触发并且出现相应的样式。来看代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{margin:0;padding:0;} ???????ul,li{list-style: none} ???????.nav{overflow: hidden;margin:30px auto;height:60px;width:600px;} ???????.nav li{float:left;width:100px;text-align:center;height:60px;line-height:60px;background-color: #00c87a;position: relative} ???????.nav li a{color:#fff;position:absolute;left:0;width:100%;height:100%;text-decoration: none;z-index: 100} ???????.nav li span{width:100%;height:100%;position:absolute;left:0;top:60px;background-color: #ff8703;z-index: 10} ???</style></head><body> ???<ul class="nav"> ???????<li> ???????????<a href="javascript:void(0)">导航1</a> ???????????<span></span> ???????</li> ???????<li> ???????????<a href="javascript:void(0)">导航2</a> ???????????<span></span> ???????</li> ???????<li> ???????????<a href="javascript:void(0)">导航3</a> ???????????<span></span> ???????</li> ???????<li> ???????????<a href="javascript:void(0)">导航4</a> ???????????<span></span> ???????</li> ???????<li> ???????????<a href="javascript:void(0)">导航5</a> ???????????<span></span> ???????</li> ???????<li> ???????????<a href="javascript:void(0)">导航6</a> ???????????<span></span> ???????</li> ???</ul></body><script src="js/jquery-1.11.3.min.js"></script><script> ???$(function(){ ??????$(".nav li").on("mouseenter",function(){ ???????????$(this).children("span").stop().animate({top:0}) ???????}).on("mouseleave",function(){ ???????????$(this).children("span").stop().animate({top:60}) ???????}); ???????//启用数字键触发mouseenter事件,离开触发mouseleave事件 ???????//bug：按下键盘不弹起，一直在触发，解决不让触发下一次的问题就是增加节流阀,即设置一个开关，键盘按下去让其为false；弹起为true ???????var flag=true; ???????$(document).on("keydown",function(e){ ???????????if(flag){ ???????????????flag=false; ???????????????var code = e.keyCode;//获取键盘的code码 ???????????????if(code>=49 && code<=54){//数字键盘1~6的code是49~54 ???????????????????$(".nav li").eq(code-49).mouseenter(); ???????????????} ???????????} ???????}); ???????$(document).on("keyup",function(e){ ???????????flag=true; ???????????var code = e.keyCode; ???????????if(code>=49 && code<=54){ ???????????????$(".nav li").eq(code-49).mouseleave(); ???????????} ???????}) ???})</script></html>当点击数字键盘3时候效果图如下：
jquery实现导航启用数字键盘监听效果
原文地址：https://www.cnblogs.com/web001/p/8476026.html