我怎样才能使用两个按钮上下导航？ [英] How can I navigation up and down a ul using two buttons?

问题描述

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

不知道如何去做这件事......

 < div ID = MainMenu的 > 
< ul> 
< li>< a href =＃> PATIENT TEST< / a>< / li> 
< li>< a href =＃> QC TEST< / a>< / li> 
< li>< a href =＃>查看结果< / a>< / li> 
< li>< a href =＃>其他< / a>< / li> 
< / ul> 
< / div> 
  

我使用下面的jQuery代码来切换活动li的类... p>

  $（li：not（.active））。live（click，function（）{
 $ （this）.addClass（menuActive）; 
 $（this）.siblings（）。removeClass（menuActive）; 
}）; 
  

解决方案

可能是这样的：

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

 < div id =MainMenu> 
< ul> 
< li class =active>< a href =＃> PATIENT TEST< / a>< / li> 
< li>< a href =＃> QC TEST< / a>< / li> 
< li>< a href =＃>查看结果< / a>< / li> 
< li>< a href =＃>其他< / a>< / li> 
< / ul> 
< / div> 
< a href =＃id =btnUp>上< / a> 
< a href =＃id =btnDown>向下< / a> 
 
 $ b $（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'）; 
} 
}）; 
}）; 
  

或者使用键盘导航：

<$ p $ （$）$（$＃$）$（$）$ $ b 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'）;
}
}）;

I have a simple ul and need to be able to navigate up and down the different li, using a up and down button. That way when the up button is clicked and will select each li, until it gets to the top of the ul and then you can press the down button to navigate back down, selecting the next li, each time the button is clicked.

Not sure how to go about this...

    <div id="MainMenu">
        <ul>
            <li><a href="#">PATIENT TEST</a></li>
            <li><a href="#">QC TEST</a></li>
            <li><a href="#">REVIEW RESULTS</a></li>
            <li><a href="#">OTHER</a></li>
        </ul>
    </div>

I'm using the following jQuery code to switch the class for the active li...

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

解决方案

Probably something like this:

Demo http://jsfiddle.net/Us4q9/3/

<div id="MainMenu">
    <ul>
        <li class="active"><a href="#">PATIENT TEST</a></li>
        <li><a href="#">QC TEST</a></li>
        <li><a href="#">REVIEW RESULTS</a></li>
        <li><a href="#">OTHER</a></li>
    </ul>
</div>
<a href="#" id="btnUp">Up</a>
<a href="#" id="btnDown">Down</a>


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

Or using keyboard navigation:

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

这篇关于我怎样才能使用两个按钮上下导航？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！