显示/隐藏单击

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";
}

这有帮助吗？