javascript - 如何在链接栏下隐藏和显示内容？

Question

如何让一组链接的行为像按钮一样，当一个链接被按下时，它会显示一些隐藏的内容，而当另一个链接被按下时，它会隐藏之前的内容并显示一些其他内容？默认情况下必须单击第一个链接才能显示第一组隐藏内容。

这是我的 fiddle : 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 active 类作为你希望对哪个选项卡和内容可见的标志