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

动态菜单链接替换Jquery

2 个答案: