javascript - 我可以根据点击指定的按钮显示一个 div，隐藏所有其他 div 吗？

Question

这似乎是一个常见问题，但是当我检查答案时，它们都是不同的。

我有一排五个链接。每个下面都有对应的div。当我单击一个链接时，我希望显示它的 div 并隐藏所有其他的。

这是我遇到的一些似乎在正确轨道上的代码:

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

但是如果我使用没有目的地的“a”，单击链接会将我带到页面顶部。我只想让下面的 div 显示或隐藏...

我可以使用“button”或“div”代替“a”吗？如果是这样，我会用什么来代替“rel”？

抱歉这个菜鸟问题。我似乎无法使我在这里找到的任何解决方案都适用于我的网站。最简单的方法是什么？

下面是一些绝对适用于上述 jquery 脚本的 HTML:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" rel="week_3">Week 3</a>
<a href="" rel="week_4">Week 4</a>
<div>
  <div id="week_3" style="display: none">[..xz.]</div>
  <div id="week_4" style="display: none">[...]</div>
</div>

但是，如果我的 href="" 出于某种原因单击该链接会将我跳到页面顶部。所以我宁愿使用可点击的 div 或按钮而不是热链接。在这种情况下，我可以在脚本中使用什么来代替“rel”？

Answer 1

看来您只需要通过添加 e.preventDefault();

来防止默认行为

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" rel="week_3">Week 3</a>

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

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