用純JS實現二級菜單效果
本文實例為大傢分享瞭JS實現二級菜單效果的具體代碼,供大傢參考,具體內容如下
js點擊出現二級菜單,點擊二級菜單主菜單換成二級菜單
點擊出現二級菜單
<style> *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red; color:#fff; text-align:center; line-height:40px;h vertical-align:middle; border:1px solid #FFF; } .erji1{ width:200px; height:40px; background-color:#F63; color:#fff; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #FFF; } #erji2{ display:none; } #erji3{ display:none; } #erji4{ display:none; } </style> </head> <body> <div class="yiji" onclick="Show('erji2')">首頁</div> <div id="erji2"> <div class="erji1">1</div> <div class="erji1">1</div> <div class="erji1">1</div> </div> <div class="yiji" onclick="Show('erji3')">人才</div> <div id="erji3"> <div class="erji1">1</div> <div class="erji1">1</div> <div class="erji1">1</div> </div> <div class="yiji" onclick="Show('erji4')">市場</div> <div id="erji4"> <div class="erji1">1</div> <div class="erji1">1</div> <div class="erji1">1</div> </div> </body> <script type="text/javascript"> function Show(a) { var a = document.getElementById(a); if(a.style.display == "block") { a.style.display = "none"; } else { a.style.display = "block"; } } </script>
#caidan{ width:200px; height:40px; border:1px solid #999; text-align:center; line-height:40px; vertical-align:middle; } .list{ width:200px; height:40px; border:1px solid #999; border-top-width:0px; text-align:center; line-height:40px; vertical-align:middle; display:none; } #caidan,.list:hover{ cursor:pointer; } .list:hover{ background-color:#63F; }
<div style="width:200px; height:400px;"> <div id="caidan" onclick="Show()">中國</div> <div class="list" onclick="Xuan(this)">山東</div> <div class="list" onclick="Xuan(this)">濟南</div> <div class="list" onclick="Xuan(this)">濟寧</div> <div class="list" onclick="Xuan(this)">威海</div> <div class="list" onclick="Xuan(this)">淄博</div> </div>
function Show() { var list = document.getElementsByClassName("list"); //顯示列表 for(var i=0;i<list.length;i++) { list[i].style.display = "block"; } } function Xuan(a) { var c = document.getElementById("caidan"); c.innerHTML = a.innerHTML; var list = document.getElementsByClassName("list"); //顯示列表 for(var i=0;i<list.length;i++) { list[i].style.display = "none"; } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- None Found