jquery - 动态菜单链接替换 ​​Jquery

Question

我需要隐藏所有列表元素，但根据导航栏按下的方向或按钮仅在特定时间显示一个。

我试过这个：

$('ul li').hide().first().show();

这向我展示了列表中的第一个元素。

但是现在我需要通过我不知道该怎么做的导航来控制列表。

基本上，我需要一个或多或少具有这种布局的菜单：

< - prev           LINK1            next - >

所以基本上，id 有一个无序列表，所以 html 会是这样的

<ul>
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
</ul>

所以，我一次只需要显示一个，一旦按下下一个或上一个按钮，如果它在结尾或开始，它将“循环通过”列表。

Answer 1

也许这些代码可以帮助你 http://jsfiddle.net/sechou/UmRph/7/

$("li").hide();   // hide every element first
$("li:first").show(); // only display the first one
var idx = 0;
$("nextbtn").click(function(){
     if(idx == $("li").size() -1)
          idx =0;
     else
          idx++;

     $("li").hide();
     $("li:eq("+ idx + ")").show();
});
$("prevbtn").click(function(){
     if(idx == 0)
          idx = $("li").size() -1;
     else
          idx--;

     $("li").hide();
     $("li:eq("+ idx + ")").show();
});

Answer 2

请，如果你要上传一些东西，请确保它是正确的。

根据我的经验，您的语法和拼写不正确，当事情出错时很难解决问题，谢谢您的帮助，经过大约 2 个小时的摆弄，我仍然设法让您的代码正常工作。 .

var elem = '#collList li';    
$(elem).hide();
$(elem + ":first").show();
var count = 0;
$('#nextBtn').click(function() {
    if (count == $(elem).size() - 1) {
        count = 0;
    }
    else {
        count++;
    }
    $(elem).hide();
    $(elem + ":eq(" + count + ")").show();
});
$('#prevBtn').click(function() {
    if (count == 0) {
        count = $(elem).size() - 1;
    }
    else {
        count--;
    }
    $(elem).hide();
    $(elem + ":eq(" + count + ")").show();
});