我有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来实现这一目标。
答案 0 :(得分:4)
您可以执行以下操作:
$(".inner-div:visible").hide().next().show();
这将找到该类的第一个可见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();
答案 1 :(得分:0)
如何为不可见的div添加一个额外的类,比如invisible
,然后在该类的css中指定display:none
。
每当按下链接时,将类添加到容器中尚未获取它的任何div,然后使用inner-div
类(或第一个inner-div
从下一个div中删除该类如果你在那里,那么
答案 2 :(得分:0)
不知道您是否受到要求的限制,但我认为cycle or carousel插件也适用于此类工作。