jQuery技术:如何使用两个按钮上下导航？

可能是这样的：

演示

 
 
 
PATIENT TEST
 
QC TEST
 
REVIEW RESULTS
 
OTHER
 
 
 Up Down $(document).ready(function () { $('#btnDown').click(function () { var $current = $('#MainMenu ul li.active'); if ($current.next().length > 0) { $('#MainMenu ul li').removeClass('active'); $current.next().addClass('active'); } }); $('#btnUp').click(function () { var $current = $('#MainMenu ul li.active'); if ($current.prev().length > 0) { $('#MainMenu ul li').removeClass('active'); $current.prev().addClass('active'); } }); }); 

或者使用键盘导航：

  $(window).keyup(function (e) { var $current = $('#MainMenu ul li.active'); var $next; if (e.keyCode == 38) $next = $current.prev(); if (e.keyCode == 40) $next = $current.next(); if ($next.length > 0) { $('#MainMenu ul li').removeClass('active'); $next.addClass('active'); } }); 

使用keydown侦听器并使用键38和40作为向上和向下箭头。

 $(document).keydown( function(e) { var keyCode = e.keyCode || e.which; if ( keyCode === 38 ) { // up arrow pressed } else if ( keyCode === 40 ) { // down arrow pressed } }); 

试试这个。 （您需要首先单击主体才能使其工作）。

需要了解更多jQuery教程分享如何使用两个按钮上下导航？，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

 var selid=0; var numlis =$("#MainMenu > ul > li").length; $(licn(0)).addClass("menuActive"); $("li:not(.active)").live("click", function() { $(this).addClass("menuActive"); $(this).siblings().removeClass("menuActive"); }); $("body").live("keydown",function(e) { if(e.which==38) { changeSel(-1); } else if(e.which==40) { changeSel(1); } }); function licn(n) { return "#MainMenu > ul > li:nth-child("+(n+1)+")"; } function changeSel(dir) { $(licn(selid)).removeClass("menuActive"); selid+=dir; selid%=numlis; if(selid<0) { selid+=numlis; } $(licn(selid)).addClass("menuActive"); }