javascript - 切换 jquery 无法正常工作

Question

我正在使用一种功能，比如我想一次只显示一个选项卡，如果我单击其他选项卡将隐藏，我也想切换打开的选项卡。

.show() JQuery 只出现在第一个第一个选项卡上，而不是其他选项卡。

JQuery :

$('#toClick').click(function() {
    $('#toShow').hide();
    $(this).parent('#hideShow').find('#toShow').toggle();
});

HTML :

<span id="hideShow">
  <span id="toClick">tab 1</span>
  <span id="toShow">Tab 1 content</span>
</span>


<span id="hideShow">
  <span id="toClick">tab 2</span>
  <span id="toShow">Tab 2 content</span>
</span>


<span id="hideShow">
  <span id="toClick">tab 3</span>
  <span id="toShow">Tab 3 content</span>
</span>

Answer 1

id 在同一个文档中应该是唯一的，通过一般的 class 更改重复的，检查下面的示例:

<span class="hideShow">
    <span class="toClick">tab 1</span>
    <span class="toShow">Tab 1 content</span>
</span>

<span class="hideShow">
    <span class="toClick">tab 2</span>
    <span class="toShow">Tab 2 content</span>
</span>

<span class="hideShow">
  <span class="toClick">tab 3</span>
  <span class="toShow">Tab 3 content</span>
</span>

然后使用类选择器。:

$('.toClick').click(function() {
    $('.toShow').hide();
    $(this).parent('.hideShow').find('.toShow').show();
});

希望这对您有所帮助。

---