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
Eine kurze Einführung in React
Inhaltsverzeichnis 1. CDN-Einführung 1.1 reagiere...
Detaillierte Erklärung der MySQL-Zeichenfolgenverkettungsfunktion GROUP_CONCAT
Im vorherigen Artikel habe ich ein tabellenübergr...
Führen Sie die Schritte zum Konfigurieren der grundlegenden Benutzerauthentifizierung auf Nginx-Ebene aus.
Vorwort Anwendungsszenario: Wahrscheinlich muss d...
Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)
1.Befehl nicht gefunden Befehl nicht gefunden 2. ...
Detaillierte Erläuterung der Lösung, um den Inhalt im Container im Flex-Layout zu halten
Auf der mobilen Seite ist das Flex-Layout sehr nü...
Beschreibung des MySQL-Optimierungsparameters query_cache_limit
query_cache_limit query_cache_limit gibt die Puff...
Erzielen Sie mit reinem CSS3 in wenigen einfachen Schritten einen 3D-Flip-Effekt
Als Pflichtkurs für Frontend-Entwickler kann CSS3...
Detaillierte Erläuterung der Windows-Zeitserver-Konfigurationsmethode
Kürzlich habe ich festgestellt, dass die Serverze...
Erkunden Sie die Implementierung der Datenfreigabe und Methodenfreigabe für JavaScript-Prototypen
Weitergabe von Daten Welche Art von Daten müssen ...
Einführung in Docker-Container
Docker-Übersicht Docker ist eine Open-Source-Lösu...
So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)
Inhaltsverzeichnis einführen Unterstützt Intel-CP...
Diagramm des Hyperledger Fabric 1.4-Umgebungskonstruktionsprozesses unter Windows 10
InhaltHyperledger Fabric1.4-Umgebungseinrichtung ...
Eine kurze Diskussion über die Ausführungsdetails der Mysql Multi-Table Join-Abfrage
Erstellen Sie zunächst die Falldemonstrationstabe...
Grundlagen der funktionalen Programmierung in JavaScript
Inhaltsverzeichnis 1. Einleitung 2. Was ist funkt...
Verwendung des Linux-Watch-Befehls
1. Befehlseinführung Der Befehl „Watch“ führt den...