Jquery 单击链接时显示一个div并隐藏其他div

我有一个37个链接和37个隐藏的div与一些文本列表。计数器以3开始，以40结束。我想做的是在单击链接时显示一个div，同时隐藏所有其他div

链接如下所示：

<a href="#" rel="week_3">Week 3</a>
<a href="#" rel="week_4">Week 4</a>

<div id="week_3" style="display: none">[...]</div>
<div id="week_4" style="display: none">[...]</div>

div看起来像这样：

<a href="#" rel="week_3">Week 3</a>
<a href="#" rel="week_4">Week 4</a>

<div id="week_3" style="display: none">[...]</div>
<div id="week_4" style="display: none">[...]</div>

[…]
[...]

---

我想使用jQuery执行此任务。我不知道如何做的是做一个循环，检查这些链接是否被点击

沿着以下路线的东西：

$('a').on('click', function(){
   var target = $(this).attr('rel');
   $("#"+target).show().siblings("div").hide();
});

我们应该做到这一点

附言：你的div必须放在一个容器里才能工作。 做一件事

给你的女主角上课 这样，当您单击链接时，您可以隐藏该特定类，然后通过单击链接显示所需的div

<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>

<a href="#" onClick="$('.abc').hide();">

试试这个：

HTML:

脚本：

$(".link").click(function(e) {
    e.preventDefault();
    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

---

为所有

div

s设置一些公共类，比如

class='week'

。并使用以下方法执行所需操作：

$("a[rel^='week']").on('click', function(){
  $("div.week").hide();
  var targetDiv = $(this).attr('rel');
  $("#"+targetDiv).show();

---

}))

您可以检查下面两个

jsfiddle

文件。很好用。你想要这种类型的吗

[手风琴式]

---

[制表符类型]

一次显示一个div吗？或者，如果用户单击三个链接，您是否希望显示相应的三个div，但所有其他div保持隐藏？一次一个div。用户单击rel=“week\u 3”的链接，就会显示id=“week\u 3”的div。他正要发布类似的内容。我会这样做的。这是我一直在做的事情：但上面的内容是正确的。我使用了它，但为了额外的安全性，我添加了继承，这样页面上的其他链接就不会受到影响。在我的情况下，

项目注释框LIA

$("a[rel^='week']").on('click', function(){
  $("div.week").hide();
  var targetDiv = $(this).attr('rel');
  $("#"+targetDiv).show();