如何隐藏和显示链接栏下的内容？

Question

如何使一组链接表现得像按钮，当按下一个时，它会显示一些隐藏的内容，当另一个按下时，它隐藏了以前的内容并显示了一些其他内容？默认情况下，必须单击第一个链接以显示第一组隐藏内容。

这是我的小提琴：http://jsfiddle.net/sr1fqt4n/

我尝试使用以下脚本切换可见性：

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

问题是默认情况下不显示第一个链接的内容，并且在单击另一个链接时没有任何内容隐藏。此外，链接的行为不像按钮。

期望的结果看起来像他们在第2节分集剧情：https://baike.baidu.com/item/%E6%9D%A5%E8%87%AA%E6%98%9F%E6%98%9F%E7%9A%84%E4%BD%A0/12029711

Answer 1

您需要制作多个标签，在这种情况下无需使用<a>标签您可以轻松使用a plugin like this

但是如果你坚持用自己的方式编写代码，请尝试使用css活动类作为标记，以便显示哪些选项卡和内容

Answer 2

您的事件处理程序仅应用于每次单击时的每个href。因此，事件处理程序仅在单击的元素上激活，不会影响其他元素，因为其他元素没有发生事件。

你需要使用自己的代码吗？或者像Aras提到的那样，有很多可用的插件。 bootstrap和jquery（以及任何库）都有选项卡面板的解决方案。

并且<a>标签用于定义超链接。 <button>或<div>标签可能更合适。

但是如果你需要一个vanilla JS解决方案，这里有一支笔，其代码设置为默认值。基本上，您需要一个for循环来控制切换。 https://codepen.io/Ghandour/pen/LjpXPx?editors=1010

  for (i = 0; i < tabButton.length; i++) {
    tabContent[i].style.display = 'none';
    tabButton[i].classList.remove('active');
}

如果对代码有任何疑问，将很乐意解释。