javascript - show and hide div when clicking on a link

When i click on a link, i want a div to bee 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 bee 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=".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ö[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>

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./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ö[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>

Share Improve this question edited Feb 6, 2013 at 10:03 Flops 1,42015 silver badges18 bronze badges asked Feb 6, 2013 at 9:56 DrWooolie 8,0557 gold badges21 silver badges19 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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);");
}

}

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/538s2/

use div.style.display = 'block'; div.style.display = 'none';

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./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> aperö[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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - show and hide div when clicking on a link - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)