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
Verwendung des Linux-Befehls ifconfig
1. Befehlseinführung Der Befehl ifconfig (Netzwer...
So aktivieren Sie Flash in Windows Server 2016
Ich habe vor Kurzem VMware Horizon bereitgestellt...
MySQL InnoDB-Überwachung (Systemebene, Datenbankebene)
MySQL InnoDB-Überwachung (Systemebene, Datenbanke...
Häufige Fehler beim Schreiben von HTML-Tags
Wir sollten besser aufpassen, denn die HTML-Poliz...
Installation und Verwendung von Apache-Stresstest-Tools
1. Herunterladen Gehen Sie zur offiziellen Apache...
Detaillierte Erklärung der CSS-Float-Eigenschaft
1. Was ist Floating? Floaten bedeutet, wie der Na...
Tipps zur Optimierung von CSS-Schattenanimationen
Diese Technik stammt aus diesem Artikel - So anim...
Konfigurieren Sie eine Selenium-Umgebung basierend auf Linux und implementieren Sie den Betrieb
1. Selenium unter Linux verwenden 1. Installieren...
Lösen Sie die Probleme, die bei der Installation von mysql-8.0.11-winx64 in einer Windows-Umgebung auftreten
Laden Sie das MySQL-Installationspaket herunter. ...
Ein einfaches Beispiel für eine gemeinsame MySQL-Tabellenabfrage
MySql verwendet verknüpfte Tabellenabfragen, die ...
Umfassende Interpretation der MySQL Master-Slave-Replikation, vom Prinzip bis zur Installation und Konfiguration
Warum brauchen wir Master-Slave-Replikation? 1. I...
Regeln für die Gestaltung des Anmeldeformulars
Ich habe „Patterns for Sign Up & Ramp Up“ vor ...
Das Hintergrundbild der Tabelleneinstellung kann nicht zu 100 % angezeigt werden. Lösung
Während der Entwicklung wurden die folgenden Situ...
So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS
Inhaltsverzeichnis Vorwort Ajax seriell und paral...
Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten
Inhaltsverzeichnis 1. Nachfrage 2. Umsetzung 3. E...