javascript - show and hide div when clicking on a link -
when click on link, want div become visible. however, need knowing link clicked on, checking id has. content hidden, not become visible when click on link. not allowed utilize jquery. solution?
javascript
function show() { var = 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"); (i = 0; < divs.length; i++) { if (divs[i].classname == "div") { divs[i].style.visibility = 'hidden'; } } var = 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 scandinavien.</p> </div> </body>
create links object provides mappings. grab target element event , store id. utilize id grab proper element's id 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 = document.getelementsbytagname("a"); document.getelementbyid(links[id]).style.visibility = 'visible'; } there issue init function. since a array of elements must iterate array , bind show function onclick event.
function init() { var divs = document.getelementsbytagname("div"); (i = 0; < divs.length; i++) { if (divs[i].classname == "div") { divs[i].style.visibility = 'hidden'; } } var = document.getelementsbytagname("a"); for(var x = 0; x < a.length; x++){ a[x].onclick = show; } } working example: http://jsfiddle.net/538s2/
javascript html show-hide
No comments:
Post a Comment