單擊鏈接時顯示並隱藏div

當我點擊一個鏈接時，我想要一個div變爲可見。但是，我需要通過知道哪個鏈接被點擊來做到這一點，通過檢查它具有哪個ID。內容是隱藏的，但當我點擊鏈接時不會顯示。我不允許使用jquery。任何解決方案單擊鏈接時顯示並隱藏div

的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ö[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>

來源

2013-02-06 DrWooolie

創建一個鏈接對象，它提供的映射。從事件中抓取目標元素並存儲其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'; 
}

還有一個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; 
    } 
}

工作實施例：http://jsfiddle.net/538s2/

來源

2013-02-06 10:00:37

它不工作，並讓我困擾的是，我沒有得到在控制檯 – DrWooolie

任何錯誤也許，我不正確地調用方法 – DrWooolie

@DrWoolie看到我的更新關於通過您檢索的錨點數組迭代。 –

使用div.style.display = '塊'; div.style.display ='none';

來源

2013-02-06 10:01:17 Rinku

隱藏的作品就好。但我不認爲那是失敗的地方。 – DrWooolie

您需要以不同的方式做到這一點。我做了一些改變。您可以複製並試試這個

 <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> 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>

來源

2013-02-06 10:11:49 polin

我可以使用它，通過我需要在一個單獨的文件中的js代碼 – DrWooolie

然後在不同的文件中使用JS代碼。有什麼大不了的。搜索它如何在不同頁面使用JS – polin

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

}

來源

2013-02-06 10:24:12

歡迎來到SO。請嘗試改進答案的格式，使其更具可讀性。 –

感謝您的建議，您的代碼工作正常。但問題是新的內容不能替代舊的內容。 – DrWooolie

單擊鏈接時顯示並隱藏div

回答

相關問題