首頁 > 文章 > web前端 > 使用JavaScript如何實現左側選單效果

使用JavaScript如何實現左側選單效果

亚连原創: 2018-06-20 17:11:132443瀏覽

這篇文章主要為大家詳細介紹了JavaScript實現左側選單效果，具有一定的參考價值，有興趣的小夥伴們可以參考一下

本文實例為大家分享了js實作左側選單效果展示的具體程式碼，供大家參考，具體內容如下

目前所學做出來的程式碼量有點大，以後的學習會使它更簡單

<!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>
<p style="height: 48px"></p>
<p style="width: 300px">
 <p class="item">
 <p id=&#39;i1&#39; class="header" onclick="ChangeMenu(&#39;i1&#39;);">菜单1</p>
 <p class="content hide">
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
 </p>
 </p>
 <p class="item">
 <p id=&#39;i2&#39; class="header" onclick="ChangeMenu(&#39;i2&#39;);">菜单2</p>
 <p class="content hide">
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
 </p>
 </p>
 <p class="item">
 <p id=&#39;i3&#39; class="header" onclick="ChangeMenu(&#39;i3&#39;);">菜单3</p>
 <p class="content hide">
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
 </p>
 </p>
 <p class="item">
 <p id=&#39;i4&#39; class="header" onclick="ChangeMenu(&#39;i4&#39;);">菜单4</p>
 <p class="content hide">
  <p>内容4</p>
  <p>内容4</p>
  <p>内容4</p>
 </p>
 </p>
</p>
<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(&#39;hide&#39;);
 }
 current_header.nextElementSibling.classList.remove(&#39;hide&#39;);
 }
</script>
</body>
</html>

效果就是這樣：

點擊任一選單後就會這樣：

#上面是我整理給大家的，希望今後會對大家有幫助。

詳細介紹js中this物件用法

#使用three.js製作一個專案

#在JS中如何實現預覽效果

詳細介紹在Bootstrap中為Modal添加拖曳功能

以上是使用JavaScript如何實現左側選單效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript bootstrap JS 对象 this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用vue如何實作token驗證下一篇：使用vue如何實作token驗證

看更多