如何使用两个按钮上下导航？

我有一个简单的ul，需要能够使用向上和向下按钮在不同的li上上下导航。 这样，当单击向上按钮并选择每个li时，直到它到达ul的顶部，然后您可以按下向下按钮导航回来，选择下一个li，每次单击按钮。

不知道如何去做…

 
 
PATIENT TEST
 
QC TEST
 
REVIEW RESULTS
 
OTHER
 
  

我正在使用以下jQuery代码来切换活动li的类…

  $("li:not(.active)").live("click", function() { $(this).addClass("menuActive"); $(this).siblings().removeClass("menuActive"); }); 

Answer 1

可能是这样的：

演示 http://jsfiddle.net/Us4q9/3/

 
 
 
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'); } }); 

Answer 2

使用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 } }); 

Answer 3

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

 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"); }