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

Question

几年前这里有一个 post 关于 onclick show / hide divs。

直到您在选项卡内添加 div 或跨度 *show link 然后内容被隐藏。

我在 tab1show 中添加了一个 div 面，当您单击它时，内容会被隐藏。有办法解决这个问题吗？

<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。要解决此问题，请将选择器更改为：

$('#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>

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

jQuery onclick show / hide multiple divs - Extra div hidden

html

jquery

show

hide