Question

我有一个简单的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="#">REVIEW RESULTS</a></li>
            <li><a href="#">OTHER</a></li>
        </ul>
    </div>

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

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

Answer 1

可能是这样的：

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

或使用键盘导航：

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

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

3 个答案: