JavaScript實現(xiàn)左側菜單效果
更新時間：2017年12月14日 10:22:31 作者：XYQS
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)左側菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)左側菜單效果展示的具體代碼，供大家參考，具體內容如下
當前所學做出來的代碼量有點大，以后的學習會使它更簡單
<!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>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">菜單2</div>
<div class="content hide">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">菜單3</div>
<div class="content hide">
<div>內容3</div>
<div>內容3</div>
<div>內容3</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');">菜單4</div>
<div class="content hide">
<div>內容4</div>
<div>內容4</div>
<div>內容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)了一個簡單的菜單。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了es6函數(shù)之箭頭函數(shù)用法,結合實例形式詳細分析了es6箭頭函數(shù)基本功能、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
有些符號在URL中是不能直接傳遞的，如果要在URL中傳遞這些特殊符號，那么就要使用他們的編碼了。下表中列出了一些URL特殊符號及編碼。2010-01-01
本文給大家介紹JS實現(xiàn)的笛卡爾乘積之商品發(fā)布的相關內容，涉及到js笛卡爾積算法的相關知識，本文介紹的非常詳細，具有參考價值，感興趣的朋友一起學習吧2016-05-05
本文介紹了javascript中你所不知道的相關知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
本篇文章給大家詳細分析了javascript原型及原型鏈的相關知識點以及用法分享，有興趣的朋友參考下。2018-03-03
本節(jié)主要介紹了用js判斷日期是否能跨月查詢,需要的朋友可以參考下2014-07-07
JavaScript ES6 Class類實現(xiàn)原理詳解
這篇文章主要介紹了JavaScript ES6 Class類實現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
HTTP請求中,Content-Type頭部用于指定請求體或響應體的類型,常見的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用請求方式包括Get、Post、Put、Delete2024-09-09
微信小程序如何修改radio和checkbox的默認樣式和圖標
這篇文章主要介紹了微信小程序修改radio和checkbox的默認樣式和圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
本篇文章主要介紹了JS操作xml對象轉換為Json對象示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03