快捷導(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)文章

解析img圖片沒(méi)找到onerror事件 Stack overflow at line: 0
本篇文章主要介紹了img圖片沒(méi)找到onerror事件 Stack overflow at line: 0 需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
js中如何對(duì)json數(shù)組進(jìn)行排序
這篇文章主要介紹了js中如何對(duì)json數(shù)組進(jìn)行排序的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
JS實(shí)現(xiàn)六位字符密碼輸入器功能
這篇文章主要介紹了JS實(shí)現(xiàn)六位字符密碼輸入器功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
JS中頁(yè)面與頁(yè)面之間超鏈接跳轉(zhuǎn)中文亂碼問(wèn)題的解決辦法
在原頁(yè)面一張圖片上添加了一個(gè)鏈接，鏈接中有中文，于是在跳轉(zhuǎn)過(guò)程中出現(xiàn)中文亂碼問(wèn)題，下面給大家分享下解決方案
2016-12-12
前端構(gòu)建工具之gulp的配置與搭建詳解
gulpjs是一個(gè)前端構(gòu)建工具，與gruntjs相比，gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù)，API也非常簡(jiǎn)單，學(xué)習(xí)起來(lái)很容易，下面這篇文章主要給大家介紹了關(guān)于前端構(gòu)建工具之gulp的配置與搭建的相關(guān)資料，需要的朋友可以參考下。
2017-06-06
在標(biāo)題欄顯示新消息提示，很多公司項(xiàng)目中用到這個(gè)方法
在標(biāo)題欄顯示新消息提示，很多公司項(xiàng)目中用到這個(gè)方法,需要的朋友可以參考下。
2011-11-11
OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Google 爬蟲(chóng)如何抓取 JavaScript 的內(nèi)容
我們測(cè)試了谷歌爬蟲(chóng)是如何抓取 JavaScript，下面就是我們從中學(xué)習(xí)到的知識(shí),需要的朋友可以參考下
2017-04-04
本地存儲(chǔ)localStorage用法詳解
這篇文章主要為大家詳細(xì)介紹了本地存儲(chǔ)localStorage的用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
js parseInt("08")未指定進(jìn)位制問(wèn)題
今天在做JS關(guān)于月份的判斷，對(duì)于parseInt("01")到parseInt("07");都能得到正確的結(jié)果，但如果是parseInt("08")或parseInt("09")則返回0，首先看parseInt語(yǔ)法：parseInt(string, radix);
2010-06-06