显示/隐藏具有相同类的div-jQuery [英] Show/Hide divs with same class - jquery

问题描述

我有1个div，其中将包含3-5个同级的div. div下面是锚点.我想单击此锚点时，它将隐藏第一个div，然后显示第二个.再次单击将显示下一个，依此类推.我在所有div上都设置了display:none，但是第一个设置为div，因此当前仅显示一个.我只是不知道如何在单击锚点时隐藏第一个，然后显示第二个，然后显示第三个，然后显示下一个.

I have 1 div that will contain 3-5 divs with the same class. Below the div is an anchor. I would like for when this anchor is clicked it will hide the first div and then show the second. Another click would show the next and so on. I have set display:none on all divs but the first so only one is currently showing. I just can't figure out how to hide the first and then show the second, then third, then next when clicking the anchor.

<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>

因此，当单击更多锚点时，将一次显示一个inner-div.任何建议或想法将不胜感激.另外，我想用jquery来做到这一点.

So when the more anchor is clicked it would show one inner-div one at a time. Any suggestions or ideas would be greatly appreciated. Also, I would like to use jquery to accomplish this.

推荐答案

您可以执行以下操作:

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

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

This would find the first visible div with that class, then navigate to the next child and show it.

这假定:

1. div是兄弟姐妹
2. 如果显示最后一个 div，则单击该按钮只会将其隐藏而不显示任何内容.

1. The divs are siblings
2. If the last div is showing, clicking the button will just hide it and show nothing.

循环回到开始有点棘手.我可能会做类似的事情:

To cycle back to the beginning is slightly trickier. I might do something like:

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

要改为在显示最后一个div之后停止循环，可以执行以下操作:

To instead simply stop cycling after the last div is showing, you could do:

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

这篇关于显示/隐藏具有相同类的div-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！