jQuery onclick显示/隐藏多个div-隐藏额外的div

Question

几年前这里有一篇关于onclick-show/hidediv的帖子。

这一直有效，直到您在选项卡*显示链接中添加div或span，然后内容被隐藏。

我添加了一个div边的tab1show，当你点击它时，内容是隐藏的。有办法绕过这个吗？

https://jsfiddle.net/amuv3f5L/

<pre>
<div id="tabShows">
<div id="tab1show">
<div>
test 1 default = show
</div>
</div>
<div id="tab2show">
test 2
</div>
<div id="tab3show">
test 3
</div>
<div id="tab4show">
test 4
</div>
<div id="tab5show">
test 5
</div>
</div>
</pre>

Answer 1

问题是因为您隐藏了所有子div，而不仅仅是顶级div，而且您永远不会重新显示子div。要解决此问题，请将选择器更改为：

$('#tabShows > div').hide();

注意>选择器的使用。话虽如此，您可以通过在所有相关元素上使用公共类、使用CSS而不是JS来隐藏内容，以及使用a元素来处理点击事件以获得更好的可访问性来改进逻辑。试试这个：

$('#clicks').on('click', 'a', function(e) {
e.preventDefault();
$('#tabShows > div').hide();
var target = $(this).attr('href');
$(target).show();
});

#tabShows > div { display: none; }
#tabShows #tab1 { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clicks">
<a href="#tab1">Test 1</a>
<a href="#tab2">Test 2</a>
<a href="#tab3">Test 3</a>
<a href="#tab4">Test 4</a>
<a href="#tab5">Test 5</a>
</div>
<br /><br />
<div id="tabShows">
<div id="tab1">
<div>test 1 default = show</div>
</div>
<div id="tab2">test 2</div>
<div id="tab3">test 3</div>
<div id="tab4">test 4</div>
<div id="tab5">test 5</div>
</div>