Question

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

Answer 1

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