Heim > Artikel > Web-Frontend > So verwenden Sie JavaScript, um den Effekt des linken Menüs zu erzielen

So verwenden Sie JavaScript, um den Effekt des linken Menüs zu erzielen

亚连Original: 2018-06-20 17:11:132431Durchsuche

In diesem Artikel wird hauptsächlich die JavaScript-Implementierung des linken Menüeffekts im Detail vorgestellt, die einen gewissen Referenzwert hat. Interessierte Freunde können darauf verweisen

Das Beispiel in diesem Artikel teilt Ihnen die js-Implementierung des linken Menüs mit Der spezifische Code für die Anzeige von Menüeffekten ist wie folgt:

Die Menge an Code, die ich bisher gelernt habe, ist etwas groß, und zukünftiges Lernen wird es einfacher machen

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

Der Effekt ist so:

Nachdem Sie auf ein beliebiges Menü geklickt haben, sieht es so aus:

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle nützlich sein wird.

Verwandte Artikel:

Detaillierte Einführung in die Verwendung dieses Objekts in js

Verwenden Sie three.js, um ein Projekt zu erstellen

So erzielen Sie einen Vorschaueffekt in JS

Details zum Hinzufügen der Drag-and-Drop-Funktion zu Modal in Bootstrap

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um den Effekt des linken Menüs zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript bootstrap JS 对象 this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die Token-Verifizierung mit VueNächster Artikel：So implementieren Sie die Token-Verifizierung mit Vue

In Verbindung stehende Artikel

Mehr sehen