仅在单击时显示段落的 HTML

HTML displaying paragraph only when clicked

本文关键字：段落 HTML 显示 单击      更新时间：2023-09-26

我想知道如何点击文本，而不是链接到某个外部链接，我希望能够在同一页面上显示一个段落。例如，我想要一个隐藏的段落，并且我希望它仅在我单击某些文本时才显示。

我以为我可以使用"id"，但我不确定如何！ 

<a id="tips">test</a>
<a href="#tips">Visit the Useful Tips Section</a>

任何想法，我该怎么做？

你不一定是Javascript。您的代码实际上在工作，但您没有注意到它，因为两个元素都在另一个元素之下。如果您添加具有一定高度的<div>，您会注意到它。

<a href="#tips">Visit the Useful Tips Section</a>
<div style="height: 1000px"></div>
<a id="tips">test</a>

（但是，我并不是说您必须添加此<div>）。

您可以使用

jQuery轻松完成此操作，或者如果您想避免这种情况，这里有一个替代解决方案：

http://blog.movalog.com/a/javascript-toggle-visibility/

<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>

只需将上面的代码片段粘贴到您的标签下方，然后通过向其传递您希望切换可见性的元素的 ID 来调用它（此元素可以是任何采用 id 属性的元素）。例如

<a href="#" onclick="toggle_visibility('foo');">  
Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div>

或者，在您的情况下;包括函数和：

<a id="tips" style="display:none;">test</a>  
<a href="#" onclick="toggle_visibility('tips');">Visit the Useful Tips Section</a>

只需要一些基本的javascript代码。这里的这个就是一个很好的例子。如果您希望我更详细地解释这一点，请发表评论。

<html> 
<head> 
<style type="text/css"> 
#text 
{ 
display: none 
} 
</style> 
<script type="text/javascript"> 
function callMe() 
{ 
document.getElementById("text").style.display = 'block'; 
} 
</script> 
</head> 
<body> 
<div id="text">Hello! How are you?</div> 
<form> 
<input type="button" name="button" id="button" value= "Call Me" onclick="javascript:callMe()" /> 
</form> 
<body> 
</html>

尝试添加 jquery 并在单击时显示段落。

jsfiddle.net/6mk3a0ov/

相关文章：