javascript 单击链接时显示和隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14726088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show and hide div when clicking on a link
提问by DrWooolie
When i click on a link, i want a div to become visible. However, i need to do this by knowing which link is clicked on, by checking which id it has. The content is hidden, but will not become visible when i click on a link. I am not allowed to use jquery. Any solution?
当我点击一个链接时，我希望一个 div 变得可见。但是，我需要知道点击了哪个链接，通过检查它有哪个 id 来做到这一点。内容是隐藏的，但当我单击链接时将不可见。我不允许使用 jquery。有什么解决办法吗？
Javascript
Javascript
function show() {
var a = document.getElementsByTagName("a");
if (a.id == "link1") {
document.getElementByID("content1").style.visibility = 'visible';
} else if (a.id == "link2") {
document.getElementByID("content2").style.visibility = 'visible';
} else if (a.id == "link3") {
document.getElementByID("content3").style.visibility = 'visible';
} else if (a.id == "link4") {
document.getElementByID("content4").style.visibility = 'visible';
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
HTML
HTML
<head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>
</head>
<body>
<ul class="meny" id="menu">
<li><a href="#" id="link1">Utv?rdering/Feedback</a>
</li>
<li><a href="#" id="link2">Kontakt</a>
</li>
<li><a href="#" id="link3">?ppettider</a>
</li>
<li><a href="#" id="link4">Om Asper?d</a>
</li>
</ul>
<div class="div" id="content1">
<p>Du kan kontakta oss p? f?ljande nummer:
<br/>040-123456</p>
<p>Du kan ?ven mejla oss:
<br/>[email protected]</p>
</div>
<div class="div" id="content2">
<p><b>Asper?d ?ventyrsland</b>
</p>
<p>V?xel: 0200-123456999 (kl.08:30-15)</p>
<p>Stora V?gen 140</p>
<p>289 22 Aper?d</p>
<p>Skicka oss din <a href="Inl1-3.html">fr?ga</a>
</p>
</div>
<div class="div" id="content3">
<p>Vi har f?ljande ?ppettider:</p>
<p>M?n-Fre: 10:00 - 20:00</p>
<p>L?r: 10:00 - 18:00</p>
</div>
<div class="div" id="content4">
<p>Asper?d ?r en fin park f?r alla m?jliga personer. Vi erbjuder en massa,
<br/>men det kostar 500kr f?r att delta f?r en dag.</p>
<p>Asper?d ?r fylld med turister som bes?ker platsen minst en g?ng per m?nad.</p>
<p>Asper?d ?r bland de st?rsta n?jesparkerna i Scandinavien.</p>
</div>
</body>
回答by Zero Cool
function show(a) {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
if (a.id == "link1") {
document.getElementById("content1").style.visibility = 'visible';
}
else if (a.id == "link2") {
document.getElementById("content2").style.visibility = 'visible';
}
else if (a.id == "link3") {
document.getElementById("content3").style.visibility = 'visible';
}
else if (a.id == "link4") {
document.getElementById("content4").style.visibility = 'visible';
}
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
a[i].setAttribute("onclick", "show(this);");
}
}
}
回答by Kevin Bowersox
Create a links object which provides the mappings. Grab the target element from the event and store its id. Then use the id to grab the proper element's id from the links object.
创建一个提供映射的链接对象。从事件中获取目标元素并存储其 id。然后使用 id 从链接对象中获取正确元素的 id。
function show(event){
var links = {
link1: "content1",
link2: "content2",
link3: "content3",
link4: "content4"
};
for(var x = 0; x < links.length; x++){
document.getElementById(links[id]).style.visibility = "hidden";
}
var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}
There is also an issue with the init function. Since ais an array of elements you must iterate this array and bind the show function to the onclickevent.
init 函数也有问题。由于a是一个元素数组，您必须迭代这个数组并将 show 函数绑定到onclick事件。
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
for(var x = 0; x < a.length; x++){
a[x].onclick = show;
}
}
Working Example: http://jsfiddle.net/538s2/
工作示例：http: //jsfiddle.net/538s2/
回答by Rinku
use div.style.display = 'block'; div.style.display = 'none';
使用 div.style.display = 'block'; div.style.display = '无';
回答by polin
You need to do it in a different way. I've made some changes. you can copy and try this one
你需要以不同的方式来做。我做了一些改变。你可以复制并尝试这个
<head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>
<script type="text/javascript">
function show(id){
if(id == 'link1'){
document.getElementById("content1").style.visibility = 'visible';
}
else if(id == 'link2'){
document.getElementById("content2").style.visibility = 'visible';
}
else if(id == 'link3'){
document.getElementById("content3").style.visibility = 'visible';
}
else if(id == 'link4'){
document.getElementById("content4").style.visibility = 'visible';
}
}
function init(){
var divs = document.getElementsByTagName("div");
for(i=0; i<divs.length; i++){
if(divs[i].className == "div"){
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
</script>
</head>
<body>
<ul class="meny" id="menu">
<li><a href="javascript:show('link1')" id="link1" >Utv?rdering/Feedback</a></li>
<li><a href="javascript:show('link2')" id="link2">Kontakt</a></li>
<li><a href="javascript:show('link3')" id="link3">?ppettider</a></li>
<li><a href="javascript:show('link4')" id="link4">Om Asper?d</a></li>
</ul>
<div class="div" id="content1">
<p>Du kan kontakta oss p? f?ljande nummer:
<br> 040-123456
</p>
<p> Du kan ?ven mejla oss:
<br> [email protected]
</p>
</div>
<div class="div" id="content2">
<p><b>Asper?d ?ventyrsland</b></p>
<p>V?xel: 0200-123456999 (kl.08:30-15)</p>
<p>Stora V?gen 140</p>
<p>289 22 Aper?d</p>
<p>Skicka oss din <a href="Inl1-3.html">fr?ga</a></p>
</div>
<div class="div" id="content3">
<p>Vi har f?ljande ?ppettider:</p>
<p> M?n-Fre: 10:00 - 20:00 </p>
<p> L?r: 10:00 - 18:00 </p>
</div>
<div class="div" id="content4">
<p>Asper?d ?r en fin park f?r alla m?jliga personer. Vi erbjuder en massa,
<br> men det kostar 500kr f?r att delta f?r en dag.
</p>
<p> Asper?d ?r fylld med turister som bes?ker platsen minst en g?ng per m?nad. </p>
<p> Asper?d ?r bland de st?rsta n?jesparkerna i Scandinavien. </p>
</div>
</body>
