单击链接时显示文本
[英]Displaying text when link is clicked
问题描述
这是在我的CSS里面：
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
这是我的HTML：
<a href="http://www.website.com/#16:10">16:10</a>
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
我正在尝试让第一个链接显示“这是你的显示器宽高比。” 文本在页面下方。
任何帮助深表感谢。
4 个解决方案
解决方案1
1 已采纳 2014-01-08 21:22:18
纯CSS答案
好吧，如果你只是想追加文本可以选择使用移动到页面中的位置后anchor标记，你可以什么也没有，但类似下面的CSS做到这一点：
a:target:after{
content: " Test";
background-color: #ccffcc;
}
这样做是在活动锚点和颜色之后附加文本“Test”。 这是一个带有实现的示例页面：
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div><a href="#first">To First</a></div>
<div><a href="#second">To Second</a></div>
<div><a href="#third">To Third</a></div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div><a href="#first">To First</a></div>
<div><a href="#second">To Second</a></div>
<div><a href="#third">To Third</a></div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div><a href="#first">To First</a></div>
<div><a href="#second">To Second</a></div>
<div><a href="#third">To Third</a></div>
</div>
</body>
</html>
使用JavaScript回答
您需要绑定eventListener并阻止它移动到下一页。 以下是使用JavaScript或CSS执行此操作的方法。 JavaScript方式实际上将文本设置为您想要的任何内容。 CSS方式将隐藏实际隐藏元素。
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
解决方案2
1 2014-01-08 21:32:21
“showText”必须接收一个id参数，用于调用“document.getElementById”
试试这个，只需点击一下即可显示下面的文字：
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
我只是使用样式显示来隐藏/显示元素。 希望能帮助到你。
解决方案3
0 2014-01-08 21:23:33
只需改变你的css：
div.show {
display:block;
color: #66CCFF;
}
解决方案4
0 2017-08-04 13:44:33
在这里，我将提供一个我正在工作的例子，感谢Alberto Montellano的例子，这给了我一个想法，但最后需要的东西有点不同，可选择不显示数据并且仅在我点击时显示它，并在再次点击时使其消失。 在这个例子中，我将给你两个选择; 你可以有一个按钮或一个链接来触发JS功能来显示和隐藏正文文本，你可以选择你想要的按钮或链接是我发表评论的方式（可选），两者都表现得一样，它是取决于你想要使用哪一个。
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
单击时显示文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.