JavaScript實(shí)現(xiàn)左側(cè)菜單效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)左側(cè)菜單效果展示的具體代碼,供大家參考,具體內(nèi)容如下
當(dāng)前所學(xué)做出來的代碼量有點(diǎn)大,以后的學(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>
效果就是這樣:
點(diǎn)擊任意一個(gè)菜單后就會這樣:
這樣就實(shí)現(xiàn)了一個(gè)簡單的菜單。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue.js 左側(cè)二級菜單顯示與隱藏切換的實(shí)例代碼
- javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
- JS實(shí)現(xiàn)新浪博客左側(cè)的Blog管理菜單效果代碼
- JS實(shí)現(xiàn)的左側(cè)豎向滑動菜單效果代碼
- JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果
- js實(shí)現(xiàn)的后臺左側(cè)管理菜單代碼
- 原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
- js實(shí)現(xiàn)的四級左側(cè)網(wǎng)站分類菜單實(shí)例
- js左側(cè)三級菜單導(dǎo)航實(shí)例代碼
- js左側(cè)多級菜單動態(tài)的解決方案
相關(guān)文章
es6函數(shù)之箭頭函數(shù)用法實(shí)例詳解
這篇文章主要介紹了es6函數(shù)之箭頭函數(shù)用法,結(jié)合實(shí)例形式詳細(xì)分析了es6箭頭函數(shù)基本功能、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04基于JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布
本文給大家介紹JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容,涉及到j(luò)s笛卡爾積算法的相關(guān)知識,本文介紹的非常詳細(xì),具有參考價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05JavaScript ES6 Class類實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript ES6 Class類實(shí)現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)
這篇文章主要介紹了微信小程序修改radio和checkbox的默認(rèn)樣式和圖標(biāo),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07