JavaScript實現(xiàn)左側(cè)菜單效果
更新時間:2017年12月14日 10:22:31 作者:XYQS
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)左側(cè)菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)左側(cè)菜單效果展示的具體代碼,供大家參考,具體內(nèi)容如下
當(dāng)前所學(xué)做出來的代碼量有點大,以后的學(xué)習(xí)會使它更簡單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .item .header { height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜單1</div> <div class="content hide"> <div>內(nèi)容1</div> <div>內(nèi)容1</div> <div>內(nèi)容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜單2</div> <div class="content hide"> <div>內(nèi)容2</div> <div>內(nèi)容2</div> <div>內(nèi)容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜單3</div> <div class="content hide"> <div>內(nèi)容3</div> <div>內(nèi)容3</div> <div>內(nèi)容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜單4</div> <div class="content hide"> <div>內(nèi)容4</div> <div>內(nèi)容4</div> <div>內(nèi)容4</div> </div> </div> </div> <script> function ChangeMenu(nid) { var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for (var i = 0; i < item_list.length; i++) { var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
效果就是這樣:
點擊任意一個菜單后就會這樣:
這樣就實現(xiàn)了一個簡單的菜單。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue.js 左側(cè)二級菜單顯示與隱藏切換的實例代碼
- javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
- JS實現(xiàn)新浪博客左側(cè)的Blog管理菜單效果代碼
- JS實現(xiàn)的左側(cè)豎向滑動菜單效果代碼
- JS+CSS實現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果
- js實現(xiàn)的后臺左側(cè)管理菜單代碼
- 原生JS實現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
- js實現(xiàn)的四級左側(cè)網(wǎng)站分類菜單實例
- js左側(cè)三級菜單導(dǎo)航實例代碼
- js左側(cè)多級菜單動態(tài)的解決方案
相關(guān)文章
JavaScript ES6 Class類實現(xiàn)原理詳解
這篇文章主要介紹了JavaScript ES6 Class類實現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)
這篇文章主要介紹了微信小程序修改radio和checkbox的默認(rèn)樣式和圖標(biāo),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07