Javascript Toggle jquery无法正常工作

我使用的功能就像我想一次只显示一个选项卡一样，如果我单击“其他”将隐藏，我还想切换“打开”选项卡

.show（）

JQuery只出现在第一个选项卡上，而不是其他选项卡上

JQuery:

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

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

HTML:

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

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

表1
表1内容
表2
表2内容
表3
表3内容

id

在同一文档中应该是唯一的，通过通用的

类更改重复的id

，检查下面的示例：

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

希望这有帮助

---

---

我已经在该切换中执行了该操作，但我无法隐藏显示的span。完成了您的方法，但现在我无法隐藏显示的span

$（'.toShow'）.hide（）

将使用class

toShow

隐藏所有跨度。我创建了一个小提琴，以便您可以看到我试图解决的问题。看起来很好，请尝试更清楚地描述您试图实现的目标。