導航欄 JavaScript
[英]Navigation bar JavaScript
問題描述
我正在編寫一個代碼來使用按鈕打開和關閉導航欄我的代碼如下
#DIV1{
display:block;}
<div id="DIV1">
<ul class="topnav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1')
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
</script>
它不起作用我該怎么辦或我做錯了什么？ 我已經跳過了導航欄的其他 CSS 屬性。
3 個解決方案
解決方案1
2 2018-10-27 22:49:32
它不起作用，因為您必須使用 javascript 或內聯樣式設置其顯示才能通過 yourDiv.style.display 獲取某些內容。 在你的情況下，當你在你點擊鏈接時，顯示未設置，然后你不能在你的輸入，也不if沒有你else if語句。 所以試試這個：
var togg = document.getElementById('DIV1'); togg.style.display="block"; /* => I set a display value */ function abc(){ if (togg.style.display == "block") { togg.style.display="none"; } else if (togg.style.display == "none") { togg.style.display="block"; } }
#DIV1 { display:block; } /*you can remove this rule. You are changing the display via javascript */
<div id="DIV1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onClick="abc()">HIDE</button>
另一種方法：您可以簡單地創建一個類來“隱藏”您的 div，然后使用classList和toggle切換它：
function abc(){ var togg = document.getElementById('DIV1') togg.classList.toggle("myClass"); }
.myClass { display:none; }
<div id="DIV1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onClick="abc()">HIDE</button>
解決方案2
1 2018-10-27 22:20:00
這是正確的代碼：
<style> #DIV1{ display:block;} </style> <div id="DIV1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onClick="abc()">HIDE</button> <script> function abc() { var togg = document.getElementById('DIV1'); if (togg.style.display == "block") { togg.style.display="none"; } else { togg.style.display="block"; } } </script>
解決方案3
1 2018-10-27 22:22:34
如果我理解你的問題，試試這個：
<!DOCTYPE html> <html lang="en"> <head> <style> #div1{ display:block;} </style> <script> function abc() { var togg = document.getElementById("div1") if (togg.style.display === "none")// 3 === { togg.style.display="block"; } else { togg.style.display="none"; } } </script> </head> <body> <div id="div1"> <ul class="topnav"> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li> <li><a href="#home">Home</a></li> </ul> </div> <button onclick="abc()">HIDE</button> </body> </html>
使用Java腳本制作導航欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.