下一个 上一个 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/