如何用button或可点击div实现点击显示对应div并隐藏其他div？

别担心，新手遇到这种切换显示的小问题太正常啦！咱们一步步来搞定它：

为什么原来的a标签会跳转到顶部？ #

因为你用了href=""，点击时浏览器会默认执行跳转行为——空链接会直接跳转到页面顶部（相当于锚点#的效果）。如果不想用a标签，换成button或者可点击div完全没问题，而且更贴合交互语义～

替代rel属性的最佳选择：data-*自定义属性 #

HTML5的data-*属性是专门用来存储自定义数据的，比rel更合适（rel原本是用来定义链接和当前文档的关系的）。我们可以用data-target来存对应的div的ID，既规范又好维护。

方案1：用button标签实现（最语义化） #

button本身就是为触发交互设计的，完全不需要担心跳转问题，代码示例如下：

<!-- 先引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 切换按钮 -->
<button data-target="week_3">Week 3</button>
<button data-target="week_4">Week 4</button>

<!-- 内容区块 -->
<div class="content-group">
  <div id="week_3" style="display: none">Week 3的具体内容...</div>
  <div id="week_4" style="display: none">Week 4的具体内容...</div>
</div>

<script>
// 绑定点击事件
$('button').on('click', function() {
  // 获取目标div的ID
  var target = $(this).data('target');
  // 显示目标div，隐藏同级的其他div
  $("#" + target).show().siblings("div").hide();
});
</script>

方案2：用div标签实现（自定义样式更灵活） #

如果想要完全自定义点击区域的样式，用div也可以，只需要给div加个点击事件，代码类似：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 可点击的div切换器 -->
<div class="toggle-item" data-target="week_3">Week 3</div>
<div class="toggle-item" data-target="week_4">Week 4</div>

<!-- 内容区块 -->
<div class="content-group">
  <div id="week_3" style="display: none">Week 3的具体内容...</div>
  <div id="week_4" style="display: none">Week 4的具体内容...</div>
</div>

<script>
$('.toggle-item').on('click', function() {
  var target = $(this).data('target');
  $("#" + target).show().siblings("div").hide();
});
</script>

<!-- 加个CSS让div看起来像可点击的按钮 -->
<style>
.toggle-item {
  cursor: pointer;
  display: inline-block;
  padding: 8px 16px;
  background: #f0f0f0;
  margin-right: 10px;
  border-radius: 4px;
}
.toggle-item:hover {
  background: #e0e0e0;
}
</style>

额外小技巧：如果还是想用a标签怎么办？ #

要是你舍不得a标签的样式，只需要阻止它的默认跳转行为就行，在点击事件里加event.preventDefault()：

$('a').on('click', function(event) {
  // 阻止浏览器默认的跳转行为
  event.preventDefault();
  var target = $(this).attr('rel');
  $("#" + target).show().siblings("div").hide();
});

这样点击a标签就不会跳顶部啦～

内容的提问来源于stack exchange，提问作者big picture