javascript - 单击时显示/隐藏

Question

我要显示一个空间区域和两个文本正文。我在这个区域上方有两个“超链接”，我想用它们来显示/隐藏下面的文本。首次加载页面时，除了两个链接外，不会显示任何内容。当您单击一个链接时，它会显示文本正文。当您单击另一个链接时，它将隐藏之前的文本正文并显示新文本。只有两个超链接，但我希望用户能够在方便时来回切换。这可能吗？以前我使用 javascript 取消隐藏文本，因为它们位于两个不同的区域。我在编写代码方面不太有经验。我发现有关此主题的其他一些答案很有用，但大多数答案都使用按钮和点击监听器。有没有办法使用超链接来做到这一点？非常感谢代码示例!

Answer 1

您可以在 CSS 中定义一个类，表示“不要在此处显示文本”，然后使用超链接单击中的 JS 来切换元素的类？

因此您的 html 将包含:

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>

您的 CSS 将包含:

div.hide { display:none; [your properties]; }
div.show { [your properties]; }

你的 JS 看起来像这样:

function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}

这有什么帮助吗？