单击时显示/隐藏 [英] Show/Hide On Click

问题描述

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

I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!

推荐答案

您可以在CSS中定义一个类，说不要在这里显示文本然后使用JS从超链接点击切换元素的类

You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?

，所以你的html将包含：

so your html will contain:

<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看起来像这样：

and the your JS would look something like this:

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

这是否有帮助？

这篇关于单击时显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！