快捷導(dǎo)航

JavaScript實(shí)現(xiàn)左側(cè)菜單效果

更新時(shí)間：2017年12月14日 10:22:31 作者：XYQS

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)左側(cè)菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)左側(cè)菜單效果展示的具體代碼，供大家參考，具體內(nèi)容如下

當(dāng)前所學(xué)做出來(lái)的代碼量有點(diǎn)大，以后的學(xué)習(xí)會(huì)使它更簡(jiǎ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>內(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è)菜單后就會(huì)這樣：

這樣就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的菜單。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

es6函數(shù)之箭頭函數(shù)用法實(shí)例詳解
這篇文章主要介紹了es6函數(shù)之箭頭函數(shù)用法,結(jié)合實(shí)例形式詳細(xì)分析了es6箭頭函數(shù)基本功能、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
url 特殊字符傳遞參數(shù)解決方法
有些符號(hào)在URL中是不能直接傳遞的，如果要在URL中傳遞這些特殊符號(hào)，那么就要使用他們的編碼了。下表中列出了一些URL特殊符號(hào)及編碼。
2010-01-01
基于JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布
本文給大家介紹JS實(shí)現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
你不知道的 javascript【推薦】
本文介紹了javascript中你所不知道的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
分析javascript原型及原型鏈
本篇文章給大家詳細(xì)分析了javascript原型及原型鏈的相關(guān)知識(shí)點(diǎn)以及用法分享，有興趣的朋友參考下。
2018-03-03
判斷日期是否能跨月查詢的js代碼
本節(jié)主要介紹了用js判斷日期是否能跨月查詢,需要的朋友可以參考下
2014-07-07
JavaScript ES6 Class類實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript ES6 Class類實(shí)現(xiàn)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
解讀請(qǐng)求方式Method和請(qǐng)求類型Content-Type
HTTP請(qǐng)求中,Content-Type頭部用于指定請(qǐng)求體或響應(yīng)體的類型,常見的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用請(qǐng)求方式包括Get、Post、Put、Delete
2024-09-09
微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)
這篇文章主要介紹了微信小程序修改radio和checkbox的默認(rèn)樣式和圖標(biāo),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例
本篇文章主要介紹了JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03