欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • es6函數(shù)之箭頭函數(shù)用法實例詳解

    es6函數(shù)之箭頭函數(shù)用法實例詳解

    這篇文章主要介紹了es6函數(shù)之箭頭函數(shù)用法,結(jié)合實例形式詳細(xì)分析了es6箭頭函數(shù)基本功能、原理、用法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • url 特殊字符 傳遞參數(shù)解決方法

    url 特殊字符 傳遞參數(shù)解決方法

    有些符號在URL中是不能直接傳遞的，如果要在URL中傳遞這些特殊符號，那么就要使用他們的編碼了。下表中列出了一些URL特殊符號及編碼。
    2010-01-01
  • 基于JS實現(xiàn)的笛卡爾乘積之商品發(fā)布

    基于JS實現(xiàn)的笛卡爾乘積之商品發(fā)布

    本文給大家介紹JS實現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識，本文介紹的非常詳細(xì)，具有參考價值，感興趣的朋友一起學(xué)習(xí)吧
    2016-05-05
  • 你不知道的 javascript【推薦】

    你不知道的 javascript【推薦】

    本文介紹了javascript中你所不知道的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧
    2017-01-01
  • 分析javascript原型及原型鏈

    分析javascript原型及原型鏈

    本篇文章給大家詳細(xì)分析了javascript原型及原型鏈的相關(guān)知識點以及用法分享，有興趣的朋友參考下。
    2018-03-03
  • 判斷日期是否能跨月查詢的js代碼

    判斷日期是否能跨月查詢的js代碼

    本節(jié)主要介紹了用js判斷日期是否能跨月查詢,需要的朋友可以參考下
    2014-07-07
  • JavaScript ES6 Class類實現(xiàn)原理詳解

    JavaScript ES6 Class類實現(xiàn)原理詳解

    這篇文章主要介紹了JavaScript ES6 Class類實現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-05-05
  • 解讀請求方式Method和請求類型Content-Type

    解讀請求方式Method和請求類型Content-Type

    HTTP請求中,Content-Type頭部用于指定請求體或響應(yīng)體的類型,常見的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用請求方式包括Get、Post、Put、Delete
    2024-09-09
  • 微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)

    微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)

    這篇文章主要介紹了微信小程序修改radio和checkbox的默認(rèn)樣式和圖標(biāo),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-07-07
  • JS操作xml對象轉(zhuǎn)換為Json對象示例

    JS操作xml對象轉(zhuǎn)換為Json對象示例

    本篇文章主要介紹了JS操作xml對象轉(zhuǎn)換為Json對象示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
    2017-03-03

最新評論