显示/隐藏具有相同类的div - jquery

时间:2010-06-01 16:33:42

标签: jquery

我有1个div,包含3-5个具有相同类的div。 div下面是一个锚点。我希望当点击这个锚点时它会隐藏第一个div然后显示第二个div。再次单击将显示下一个,依此类推。我在所有div上都设置了display:none,但是第一个只显示了一个。我只是无法弄清楚如何隐藏第一个,然后显示第二个,然后是第三个,然后是下一个点击锚点。

<div class="container-div">
<div class="inner-div">...</div>
<div class="inner-div" style="display:none;">...</div>
<div class="inner-div" style="display:none;">...</div>
<a href="#" class="more">More</a>
</div>

因此,当点击更多的锚点时,它会一次显示一个内部div。任何建议或想法将不胜感激。另外,我想使用jquery来实现这一目标。

3 个答案:

答案 0 :(得分:4)

您可以执行以下操作:

$(".inner-div:visible").hide().next().show();

这将找到该类的第一个可见div,然后导航到下一个孩子并显示它。

这假定:

  1. div是兄弟姐妹
  2. 如果显示最后 div,点击该按钮只会隐藏它并显示任何内容。
  3. 循环回到开头有点棘手。我可能会这样做:

    var next = $(".inner-div:visible").hide().next();
    if (next.length > 0)
        next.show();
    else
        $(".inner-div:first").show();
    

    要在最后一个div显示后停止骑车,你可以这样做:

    var current = $(".inner-div:visible");
    if (current.next().length > 0)
        current.hide().next().show();
    

答案 1 :(得分:0)

如何为不可见的div添加一个额外的类,比如invisible,然后在该类的css中指定display:none

每当按下链接时,将类添加到容器中尚未获取它的任何div,然后使用inner-div类(或第一个inner-div从下一个div中删除该类如果你在那里,那么

答案 2 :(得分:0)

不知道您是否受到要求的限制,但我认为cycle or carousel插件也适用于此类工作。