jquery - 下一个 上一个 jquery 箭头高亮菜单

Question

我正在尝试在我的菜单下添加一个下一个和上一个按钮来突出显示我的元素。

当我用鼠标光标在菜单上单击每个部分时，它会起作用。我突出显示了每个元素。

我的问题是，当我们点击下一个或上一个按钮时，它没有突出显示我菜单上的元素。

我的 Jquery 代码有什么问题？

这是我的 Fiddle

<div id="cssmenu">
    <ul id="list">
        <li class='active'><a id="testSlide1" href='#'><span>Home</span></a></li>
        <li><a id="testSlide2" href='#'><span>Products</span></a></li>
        <li><a id="testSlide3" href='#'><span>About</span></a></li>
        <li><a id="testSlide4" href='#'><span>Contact</span></a></li>
    </ul>
</div>
<nav class="da-arrows">

<button id="PrevButton">Previous</button>
<button id="NextButton">Next</button>
</nav>

<script>
    $("a").click(function(){
      // If this isn't already active
      if (!$(this).parent().hasClass("active")) {
        // Remove the class from anything that is active
        $("li.active").removeClass("active");
        // And make this active
        $(this).parent().addClass("active");
      }
    });

    $('a').click(function(e){
        e.stopPropagation();
    });

    var list = $("#list");
    var li = list.children();
    var lengthMinusOne = li.length - 1;
    var index = 0;
    var num = $("#list li").length;

    var prevLi = $(li[0]).hasClass("active");

    $("#NextButton").click(function(){
       index++;
       if (index > lengthMinusOne) index = 0;
       prevLi.removeClass("active");
       prevLi = $(li[index]).addClass("active");
    });
    $("#PrevButton").click(function(){
       index--;
       if (index < 0) index = lengthMinusOne;
       prevLi.removeClass("active");
       prevLi = $(li[index]).addClass("active");
    });
</script>

我该怎么做？

Answer 1

$("#NextButton").click(function(){
   index++;
   if (index > lengthMinusOne) index = 0;
   prevLi.removeClass("active");
   prevLi = $(li[index]).addClass("active");
});

演示:

http://jsfiddle.net/tJ9aj/