JavaScript zum Erreichen eines einfachen Tab-Leisten-Umschaltens
|
In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung eines einfachen Tab-Leisten-Umschalteffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt 1. Tab-Leiste - Fall 1
Tab-Leistenanalyse
Analyse in li
js zum Verbergen und Anzeigen Exklusives Denken: 1) Alle Stile aller Elemente löschen (andere eliminieren) Meine Gedanken:
Code-Implementierung:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
li {
Listenstil: keiner;
}
A {
Textdekoration: keine;
Farbe: #666;
}
.vertikale-Registerkarte {
Breite: 980px;
Rand: 100px automatisch;
}
.vertikaler-Tab .nav {
Breite: 200px;
Listenstil: keiner;
}
.vertikaler-Tab .nav-tabs1 {
schweben: links;
Rahmen rechts: 3px durchgezogen #e7e7e7;
}
.vertical-tab .nav-tabs2 {
schweben: rechts;
Rahmen links: 3px durchgezogen #e7e7e7;
}
.vertical-tab li a {
Anzeige: Block;
Polsterung: 10px 20px;
Textausrichtung: zentriert;
Texttransformation: Großbuchstaben;
Buchstabenabstand: 1px;
Schriftgröße: 18px;
Schriftstärke: 700;
}
.vertikaler-Tab .aktiv {
Farbe: #198df8;
}
.vertikaler-Tab .tabs {
Breite: 500px;
schweben: links;
}
.vertikaler-Tab .tab-Inhalt {
Polsterung: 10px 20px;
Texttransformation: Großbuchstaben;
Buchstabenabstand: 1px;
}
.vertical-tab .tab-content h3 {
Farbe: #333;
Rand: 0 0 10px 0;
}
.vertical-tab .tab-content p {
Schriftgröße: 12px;
}
.vertikaler-Tab .versteckt {
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<div Klasse="vertikal-tab">
<ul Klasse="nav nav-tabs1">
<li><a href="javascript:;" class="active" index="1">Abschnitt 1</a></li>
<li><a href="javascript:;" index='2'>Abschnitt 2</a></li>
<li><a href="javascript:;" index="3">Abschnitt 3</a></li>
</ul>
<div Klasse = "Tab-Inhaltsregisterkarten">
<div Klasse="tab-content1">
<h3>Abschnitt 1</h3>
<p>Inhalt 1</p>
</div>
<div class="tab-content1 hidden">
<h3>Abschnitt 2</h3>
<p>Inhalt 2</p>
</div>
<div class="tab-content1 hidden">
<h3>Abschnitt 3</h3>
<p>Inhalt 3</p>
</div>
<div class="tab-content1 hidden">
<h3>Abschnitt 4</h3>
<p>Inhalt 4</p>
</div>
<div Klasse="tab-content1 hidden">
<h3>Abschnitt 5</h3>
<p>Inhalt 5</p>
</div>
<div class="tab-content1 hidden">
<h3>Abschnitt 6</h3>
<p>Inhalt 6</p>
</div>
</div>
<ul Klasse="nav nav-tabs2">
<li><a href="javascript:;" index="4">Abschnitt 4</a></li>
<li><a href="javascript:;" index="5">Abschnitt 5</a></li>
<li><a href="javascript:;" index="6">Abschnitt 6</a></li>
</ul>
</div>
<Skript>
var as = document.querySelectorAll("a")
var item = document.querySelectorAll(".tab-content1")
konsole.log(als)
// konsole.log(lis)
für (var i = 0; i < as.length; i++) {
as[i].addEventListener('klicken', function() {
// Andere töten for (var j = 0; j < as.length; j++) {
als[j].className = ''
}
// Lassen Sie sich this.className = "active"
// Inhalt anzeigen var index = this.getAttribute('index')
konsole.log(index)
// Andere töten for (var i = 0; i < item.length; i++) {
item[i].style.display = "keine"
}
// Lassen Sie sich item[index - 1].style.display = "block"
})
}
</Skript>
</body>
</html>Vue-Implementierung Vue ist relativ einfach zu implementieren und erfordert lediglich die flexible Verwendung von v-if und v-for Spezifischer Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.vertikale-Registerkarte {
Breite: 920px;
Rand: 100px automatisch;
}
.vertikaler-Tab .nav {
Listenstil: keiner;
Breite: 200px;
}
.vertikaler-Tab .nav-tabs1 {
Rahmen rechts: 3px durchgezogen #e7e7e7;
}
.vertical-tab .nav-tabs2 {
Rahmen links: 3px durchgezogen #e7e7e7;
}
.vertikaler-Tab .nav a {
Anzeige: Block;
Schriftgröße: 18px;
Schriftstärke: 700;
Textausrichtung: zentriert;
Buchstabenabstand: 1px;
Texttransformation: Großbuchstaben;
Polsterung: 10px 20px;
Rand: 0 0 1px 0;
Textdekoration: keine;
}
.vertikaler-Tab .tab-Inhalt {
Farbe: #555;
Hintergrundfarbe: #fff;
Schriftgröße: 15px;
Buchstabenabstand: 1px;
Zeilenhöhe: 23px;
Polsterung: 10px 15px 10px 25px;
Anzeige: Tabellenzelle;
Position: relativ;
}
.vertikaler-Tab .nav-tabs1 {
schweben: links;
}
.vertikaler-Tab .tabs {
Breite: 500px;
Box-Größe: Rahmenbox;
schweben: links;
}
.vertical-tab .tab-content h3 {
Schriftstärke: 600;
Texttransformation: Großbuchstaben;
Rand: 0 0 5px 0;
}
.vertical-tab .nav-tabs2 {
schweben: rechts;
}
.tab-Inhalt {
Position: relativ;
}
.tab-Inhalt .tab-Bereich {
Position: absolut;
oben: 10px;
links: 20px;
}
.nav li.active ein {
Farbe: #198df8;
Hintergrund: #fff;
Rand: keiner;
}
.verblassen {
Deckkraft: 0;
Übergang: alle 0,3 s linear;
}
.fade.aktiv {
Deckkraft: 1;
}
</Stil>
</Kopf>
<Text>
<div Klasse="vertical-tab" id="app">
<!-- Navigationsregisterkarten -->
<ul Klasse="nav nav-tabs1">
<li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li>
</ul>
<!-- Registerkartenbereiche -->
<div Klasse = "Tab-Inhaltsregisterkarten">
<div class="tab-pane fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'>
<h3>{{item.title}}</h3>
<p>{{item.inhalt}}</p>
</div>
</div>
<!-- Navigationsregisterkarten -->
<ul Klasse="nav nav-tabs2">
<li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<Skript>
neuer Vue({
el: "#app",
Daten: {
currentIndex: 0, // Der aktuelle Index der Tab-Liste: [{
ID: 1,
Titel: „Abschnitt 1“,
Inhalt: „Inhalt1“
}, {
ID: 2,
Titel: „Abschnitt 2“,
Inhalt: „Inhalt2“
}, {
ID: 3,
Titel: „Abschnitt 3“,
Inhalt: „Inhalt3“
}, {
ID: 4,
Titel: „Abschnitt 4“,
Inhalt: „Inhalt4“
}, {
ID: 5,
Titel: „Abschnitt 5“,
Inhalt: „content5“
}, {
ID: 6,
Titel: „Abschnitt 6“,
Inhalt: „content6“
}]
},
Methoden: {
ändern(Index, Flagge) {
wenn (Flagge) {
konsole.log(index)
dies.aktuellerIndex = Index;
} anders {
dies.aktuellerIndex = Index;
}
}
}
})
</Skript>
</body>Wenn Sie mehr erfahren möchten, können Sie auf zwei wunderbare Themen klicken: Zusammenfassung der JavaScript-Tabulatoroperationsmethoden Zusammenfassung der jQuery-Tabulatoroperationsmethoden Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: MySQL implementiert eine Lösung ähnlich der Oracle-Sequenz
>>: Docker-Bereitstellung – Springboot-Projektbeispielanalyse
Artikel empfehlen
So implementieren Sie Call, Apply und Binding in nativem JS
1. Implementieren Sie den Anruf Schritt: Legen Si...
Miniprogramme ermöglichen die Auswahl von Produktattributen oder Spezifikationen
In diesem Artikel wird der spezifische Code zur I...
Lösung für gelegentliche Abstürze des Positionierungs-Hintergrunddienstes unter Linux
Problembeschreibung Im aktuellen Hintergrunddiens...
vue3.0 + echarts realisiert dreidimensionales Säulendiagramm
Vorwort: Vue3.0 implementiert dreidimensionales S...
Galeriefunktion durch natives Js implementiert
Inhaltsverzeichnis Der erste Der Zweite Native Js...
Detaillierte Erklärung des Prinzips zum Erstellen von Tomcat in Eclipse
Beim Erstellen eines Tomcat-Servers auf einem lok...
So verbessern Sie die Startgeschwindigkeit von Idea und beheben Probleme mit verstümmelten Zeichen im Tomcat-Protokoll
Inhaltsverzeichnis Vorwort Ideenstartgeschwindigk...
Analyse der Prinzipien von Docker-Containern
Inhaltsverzeichnis 01 Was ist das Wesen eines Con...
Detaillierte Erklärung des Prinzips des js-Proxys
Inhaltsverzeichnis Was ist der Proxy-Modus? Einfü...
Warum kann das in HTML eingebettete Video im MP4-Format nicht abgespielt werden?
Der folgende Code befindet sich in meiner test.htm...
Beispiele für die Verwendung einer Link-Aktualisierungsseite und einer JS-Aktualisierungsseite
1. So verwenden Sie den Link: Code kopieren Der Co...
So sortieren Sie eine Zeile oder Spalte in MySQL
Verfahren: Nach Beschreibung: Beides kann nicht e...
Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue
1. Ergebnisse erzielen 2. Vom Backend zurückgegeb...
Die Kombination und der Unterschied zwischen ENTRYPOINT und CMD im Dockerfile
Im vorherigen Artikel [Detaillierte Erläuterung v...
Detailliertes Tutorial zur Installation der MySQL 8.0.20-Datenbank auf CentOS 7
Weiterführende Literatur: MySQL8.0.20-Installatio...