单击链接时显示并隐藏div [英] show and hide div when clicking on a link
问题描述
当我点击一个链接时，我想要一个div可见。但是，我需要通过知道哪个链接被点击来做到这一点，通过检查它具有哪个ID。内容是隐藏的，但当我点击链接时不会显示。我不允许使用jquery。任何解决方案？
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';
函数init（）{
var divs = document.getElementsByTagName（div）;
for（i = 0; i< divs.length; i ++）{
if（divs [i] .className ==div）{
divs [i] .style。能见度='隐藏';
}
}
var a = document.getElementsByTagName（a）;
a.onclick = show;
}
window.onload = init;
HTML
< HEAD>
< title> Inl1-1< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< link rel =stylesheettype =text / csshref =style-1.css>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =Uppg1.js>< / script>
< / head>
< body>
< ul class =menyid =menu>
< li>< a href =＃id =link1>优化/反馈< / a>
< / li>
< li>< a href =＃id =link2> Kontakt< / a>
< / li>
< li>< a href =＃id =link3>Öppettider< / a>
< / li>
< li>< a href =＃id =link4> OmAsperöd< / a>
< / li>
< / ul>
< div class =divid =content1>
< p> Du kan kontakta osspåföljandenummer：
< br /> 040-123456< / p>
< p> Du kanävenmejla oss：
< br />aperöd@hotmail.com< / p>
< / div>
< div class =divid =content2>
< p>< b>AsperådÄventyrsland< / b>
< / p>
< p>Växel：0200-123456999（kl.08：30-15）< / p>
< p> StoraVägen140< / p>
< p> 289 22Aperöd< / p>
< p> Skicka oss din< a href =Inl1-3.html>fråga< / a>
< / p>
< / div>
< div class =divid =content3>
Vi harföljandeöppettider：< / p>
< p>Mån-Fre：10:00 - 20:00< / p>
< p>Lör：10:00 - 18：00< / p>
< / div>
< div class =divid =content4>
< p>Asperödären fin parkförallamöjligapersoner。 Vi erbjuder en massa，
< br>>的男士和女士的500kr三角裤。< / p>
< p>Asperödärfylld med turister sombesökerplatsen minst engångpermånad。< / p>
< p>Asperödärbland destörstanöjesparkernai Scandinavien。< / p>
< / div>
< / body>
创建一个提供映射的链接对象。从事件中抓取目标元素并存储其ID。然后使用id从链接对象中获取适当的元素id。
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $变量$ links = {
link1：content1，
link2：content2，
link3：content3，
link4：content4
};
for（var x = 0; x
}
var id = event.target.id;
var a = document.getElementsByTagName（a）;
document.getElementById（links [id]）。style.visibility ='visible';
}
init函数也有问题。由于 a 是一组元素，因此您必须迭代此数组并将show函数绑定到 onclick 事件。 p>
函数init（）{
var divs = document.getElementsByTagName（div）;
for（i = 0; i< divs.length; i ++）{
if（divs [i] .className ==div）{
divs [i] .style。能见度='隐藏';
}
}
var a = document.getElementsByTagName（a）;
for（var x = 0; x
$ b 工作示例： http://jsfiddle.net/538s2/
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?
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
<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/>aperöd@hotmail.com</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>
解决方案 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.
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 a is an array of elements you must iterate this array and bind the show function to the onclick event.
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/
这篇关于单击链接时显示并隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
