Question

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

我以为我可以使用“id”，但我不知道怎么做！

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

任何想法，我怎么能这样做？

Answer 1

你可以使用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>

Answer 2

只需要一些基本的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>

Answer 3

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

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

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

Answer 4

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

jsfiddle.net/6mk3a0ov /

HTML仅在单击时显示段落

4 个答案: