Maison > Article > interface Web > Comment utiliser JavaScript pour obtenir l'effet de menu de gauche

Comment utiliser JavaScript pour obtenir l'effet de menu de gauche

亚连original: 2018-06-20 17:11:132434parcourir

Cet article présente principalement en détail l'implémentation JavaScript de l'effet de menu de gauche, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article partage avec vous l'implémentation js de la gauche. menu. Le code spécifique pour l'affichage des effets de menu est pour votre référence. Le contenu spécifique est le suivant

La quantité de code que j'ai apprise jusqu'à présent est un peu importante, et l'apprentissage futur le rendra plus simple

<!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>

L'effet est comme ceci :

Après avoir cliqué sur n'importe quel menu, il ressemblera à ceci :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Introduction détaillée à l'utilisation de cet objet en js

Utiliser three.js pour créer un projet

Comment obtenir un effet de prévisualisation dans JS

Détails de l'ajout de la fonction glisser-déposer à Modal dans Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript bootstrap JS 对象 this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la vérification des jetons à l'aide de vueArticle suivant：Comment implémenter la vérification des jetons à l'aide de vue

Articles Liés

Voir plus