JavaScript/jQuery中定位锚的基本方法

我可以想出几种使用jQuery实现以下目标的方法，但我想知道最有效的方法：

我的页面上有五个可见框。我的页面上有五个隐藏的框。每个可见框都“指定”给一个隐藏框。当我单击一个可见框时，它将显示指定给它的隐藏框

我正在使用的HTML的一个示例是：

<div class="tag">Box 1</div>
<div class="tag">Box 2</div>
<div class="tag">Box 3</div>
<div class="tag">Box 4</div>
<div class="tag">Box 5</div>

<div class="hidden-tag">Box 1</div>
<div class="hidden-tag">Box 2</div>
<div class="hidden-tag">Box 3</div>
<div class="hidden-tag">Box 4</div>
<div class="hidden-tag">Box 5</div>

使用jQuery，当我单击标记框1时，显示隐藏标记框1的最有效方式是什么？

---

请记住，如果需要，我可以编辑HTML以在每个框与其合作伙伴之间绘制连接。

以下是我将使用的方法

var divsHidden$ = $('div.hidden-tag'), divs$;

divs$ = $('div.tag').on('click', function() {
   divsHidden$.toggle(false).eq(divs$.index(this)).toggle(true);
})

HTML（这只是一个明确的例子。显然，您可以使用较短的单词，也可以不使用

-

）

因此，使用这个jQuery，当您单击任何.tag元素时，它将把元素id保存为变量

x

---

然后我们隐藏所有的.hidden，以便它们消失，但随后显示我们想要的内容。

您必须与div的内容（文本）进行比较。在本例中，内容是相同的。然而，在我的实际用例中，内容是不同的。我只是在这里做了同样的东西来画盒子之间的连接。我该如何处理与之无关的内容呢？这正是我希望找到的解决方案。非常感谢。也就是说，

$（'.hidden'）.hide（）的目的到底是什么？要隐藏任何已打开的框？@user3229383是。假设一个用户点击了框4。。所以它的隐藏框现在是打开的，但是他们点击框2。如果你没有隐藏在那里，那么方框2和方框4现在将打开。等等。所以你先把它们全部隐藏起来，然后只显示他们点击的那个。对我来说，就像一个魔咒，我只需要做一个小小的调整<代码>$（'hidden-'+x）.show（）

实际上应该是

$（'.hidden-'+x）.show（）。谢谢你，伙计。
var divsHidden$ = $('div.hidden-tag'), divs$;

divs$ = $('div.tag').on('click', function() {
   divsHidden$.toggle(false).eq(divs$.index(this)).toggle(true);
})

<div id="tag1" class="tag">Box 1</div>
<div id="tag2" class="tag">Box 2</div>
<div id="tag3" class="tag">Box 3</div>
<div id="tag4" class="tag">Box 4</div>
<div id="tag5" class="tag">Box 5</div>

<div class="hidden hidden-tag1">Box 1</div>
<div class="hidden hidden-tag2">Box 2</div>
<div class="hidden hidden-tag3">Box 3</div>
<div class="hidden hidden-tag4">Box 4</div>
<div class="hidden hidden-tag5">Box 5</div>

$('.tag').on('click', function() {
    var x = $(this).attr('id');
    $('.hidden').hide();
    $('.hidden-' + x).show();
});