显示/隐藏同一类的div - jquery

我有1个div将包含3-5个div的同一类。在div下面是一个锚点。我希望当这个锚被点击时，它会隐藏第一个div，然后显示第二个。再次点击会显示下一个等等。我已经设置显示：没有任何div，但第一个，所以只有一个当前显示。我只是无法弄清楚如何隐藏第一个，然后显示第二个，然后第三个，然后点击锚点。显示/隐藏同一类的div - jquery

<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来实现这一点。

来源

2010-06-01 Phillip L.

你到底想要什么行为？ – 2010-06-01 16:42:12

结束行为可以是（a。）循环回第一个div或（b。）锚可以停止工作或隐藏。 – 2010-06-01 17:11:11

你可以这样做：

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

这将发现与类的第一个可见的DIV，然后导航至下一子，并显示它。

这假定：

的div是兄弟
如果最后格显示时，点击该按钮只会将其隐藏和显示什么。

要循环回到开始有点棘手。我可能会做这样的事情：

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

来源

2010-06-01 16:40:16 VoteyDisciple

摇滚！非常感谢！这工作很好，但唯一的问题是，显示最后一个div后，我点击更多的div消失。是否有可能回到第一个？再次感谢你的帮助！ – 2010-06-01 16:43:26

哎。刚注意到你提到过最后会隐藏起来。对于那个很抱歉。有什么办法可以防止这种情况发生，也可以循环回到第一个？ – 2010-06-01 16:44:25

我已经编辑了一个解决方案，用于循环显示最后一个隐藏后的第一个div。 – VoteyDisciple 2010-06-01 16:48:24

怎么样让无形的div一个附加的类，说invisible，和然后在该类的css中指定display:none。

每当链接按下类添加到一个尚未得到它的容器中的任何股利，然后从与inner-div类下一格（或第一inner-div删除类，如果你在BUTTOM ）

来源

2010-06-01 16:43:37

不知道你是否受限于你的要求，但我认为cycle or carousel插件也适用于这类工作。

来源

2010-06-01 17:08:23 TheVillageIdiot

感谢您的提示。我很乐意使用插件，但由于需求，这必须是最后的手段。 :(再次感谢，我为未来的项目收藏了链接。 – 2010-06-01 17:12:33

显示/隐藏同一类的div - jquery

回答

相关问题