HTML-Beispielcode zur Implementierung des Tab-Wechsels
|
Tab-Umschalten ist auch eine gängige Technologie in Projekten. Im Allgemeinen wird das Tab-Umschalten mit js oder jq implementiert. Heute stellen wir zwei Methoden vor, um das Tab-Umschalten nur mit CSS zu implementieren: Methode 1: Prinzip: Das entsprechende Div wird über die zugehörigen Attribute des Label-Tags und den Single-Select-Typ des Inputs angezeigt 1. Erstellen Sie ein Div mit dem Klassennamen Wrap als Container 2. Erstellen Sie vier Label-Tags, die als Tab-Umschaltelemente dienen 3. Erstellen Sie in jedem Label ein Span-Tag (Navigationsinhalt) und ein Input-Tag (zum Auswählen und Aufheben der Auswahl). Der Typ ist Radio. Erstellen Sie außerdem ein Div als Inhaltsfeld, wenn auf das Navigationselement geklickt wird. Es ist zu beachten, dass der Name des Eingabetags derselbe sein muss. Ich habe es Tab genannt Das endgültige HTML sieht wie folgt aus:
<div Klasse="wrap">
<Bezeichnung>
<span>Startseite</span>
<input type="radio" name="tab" aktiviert>
<div>Homepage</div>
</Bezeichnung>
<Bezeichnung>
<span>Liste</span>
<Eingabetyp="Radio" Name="Tab">
<div>Listenseite</div>
</Bezeichnung>
<Bezeichnung>
<span>Neuigkeiten</span>
<Eingabetyp="Radio" Name="Tab">
<div>Neuigkeitenseite</div>
</Bezeichnung>
<Bezeichnung>
<span>meins</span>
<Eingabetyp="Radio" Name="Tab">
<div>Minenseite</div>
</Bezeichnung>
</div>Das wichtige CSS besteht darin, die Breite der Eingabe auf 0 zu setzen, damit der kleine Punkt auf der Eingabe nicht realistisch aussieht, und durch Klicken auf das Navigationselement die aktivierte Eingabe über die Zuordnung des Labels zu realisieren und dann die Anzeige des entsprechenden Div über input:checked+div{display:block} zu realisieren.
<style type="text/css">
*{Rand: 0;Padding: 0;}
.wickeln{
Rand: 20px automatisch;
Breite: 403px;
Höhe: 600px;
Rand: 1px, durchgehend braun;
Position: relativ;
}
Etikett{
Breite: 100px;
Höhe: 30px;
schweben: links;
Textausrichtung: zentriert;
Zeilenhöhe: 30px;
Rand rechts: 1px durchgehend braun;
Rahmen unten: 1px durchgehend braun;
}
Bezeichnung:n-ter-Typ(4){
Rand rechts: keiner;
}
Beschriftungsspanne {
Cursor: Zeiger;
}
Bezeichnung div{
Breite: 403px;
Höhe: 568px;
Position: absolut;
links: 0;
oben: 31px;
Hintergrund: #eeeeee;
Anzeige: keine;
}
Beschriftungseingabe{
Breite: 0;
}
Eingabe: geprüft + div {
Anzeige: Block;
}
</Stil>
Methode 2: Prinzip: Das Umschalten erfolgt über den Ankerpunkt des a-Tags, d. h. der href-Pfad von a dient zum Umschalten der Div-ID 1. Erstellen Sie ein Div mit dem Klassennamen Wrap als Container 2. Erstellen Sie ein Div mit dem Klassennamen „nav“ und erstellen Sie darin vier „a“-Tags. Der href des „a“-Tags ist die ID des Div, zu dem gewechselt werden soll. 3. Erstellen Sie einen Container mit dem Klassennamen sh, der ein Geschwister von nav ist, um das Umschalt-Div zu platzieren 4. Erstellen Sie ein Div, um den Inhalt anzuzeigen. Die IDs entsprechen den obigen A-Tags. Der endgültige Code lautet wie folgt:
<div Klasse="wrap">
<div Klasse="nav">
<a href="#home">Startseite</a>
<a href="#list">Liste</a>
<a href="#news">Neuigkeiten</a>
<a href="#mine">meins</a>
</div>
<div Klasse="sh">
<div id="home">Homepage</div>
<div id="list">Listenseite</div>
<div id="news">News-Seite</div>
<div id="mine">Minenseite</div>
</div>
</div>
CSS-Stileinstellung, d. h., setze das div mit dem Klassennamen sh auf display:none; dann verwende div:target{display:block}, um das ausgewählte Element anzuzeigen
<style type="text/css">
*{Rand: 0;Padding: 0}
.wickeln{
Breite: 400px;
Höhe: 600px;
Rand: 1px durchgehend braun;
Rand: 20px automatisch;
Position: relativ;
}
.nav{
Breite: 100 %;
Höhe: 30px;
}
.nav ein{
Breite: 99px;
Höhe: 30px;
Textausrichtung: zentriert;
Zeilenhöhe: 30px;
Rand rechts: 1px durchgehend braun;
Rahmen unten: 1px durchgehend braun;
schweben: links;
Textdekoration: keine;
Farbe: Schwarz;
}
.sh{
Breite: 400px;
Höhe: 569px;
Position: absolut;
links: 0;
oben: 31px;
Hintergrund: #eeeeee;
}
.sh div{
Anzeige: keine;
Textausrichtung: zentriert;
}
.sh div:Ziel{
Anzeige: Block;
}
</Stil>
Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung des Tab-Umschaltens in HTML. Weitere relevante Inhalte zum Tab-Umschalten in HTML finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Eine kurze Diskussion über die Anpassung mobiler Endgeräte
>>: Einführung in die CentOS7-Firewall und portbezogene Befehle
Artikel empfehlen
Führen Sie die Schritte zum Konfigurieren der IP-Adresse in Ubuntu 18.04 LTS aus
Vorwort Die Methode zum Konfigurieren von IP-Adre...
So stellen Sie versehentlich gelöschte Nachrichtendateien unter Linux wieder her
Wenn Dateien von einem Prozess verwendet und vers...
Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA
Schauen wir uns zunächst meine grundlegende Entwi...
Grundlagen zu Betrieb und Wartung unter Linux - Tutorial zu statischen httpd-Webseiten
Inhaltsverzeichnis 1. Verwenden Sie das Warehouse...
So handhaben Sie gleichzeitige Aktualisierungen von MySQL-Daten
Wird UPDATE gesperrt? Wird die SQL-Anweisung gesp...
Detaillierte Erklärung des in JavaScript integrierten Date-Objekts
Inhaltsverzeichnis Date-Objekt Erstellen eines Da...
So implementieren Sie eine verschachtelte if-Methode in Nginx
Nginx unterstützt weder verschachtelte if-Anweisu...
MySQL-Datenbank erstellen, Benutzer hinzufügen, Benutzerautorisierung, praktische Methode
1. Erstellen Sie eine MySQL-Datenbank 1. Datenban...
So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8
Postfix ist ein kostenloser und quelloffener MTA ...
MySQL-Techniken zum schnellen Datenvergleich
Im MySQL-Betrieb und bei der Wartung möchte ein F...
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)
In diesem Artikel wird der spezifische JavaScript...
So verwenden Sie den Nginx-Proxy zum Surfen im Internet
Normalerweise verwende ich nginx als Reverse-Prox...
JavaScript-Programmierung durch Lernen der Positionierung des Schwerpunktalgorithmus in Matlab
Inhaltsverzeichnis Matlab-Centroid-Algorithmus Da...
Zusammenfassung der MySQL InnoDB-Sperren
Inhaltsverzeichnis 1. Gemeinsam genutzte und exkl...
Lösungen für Unterschiede in der Browserinterpretation hinsichtlich Größe, Breite und Höhe in CSS
Schauen wir uns zunächst ein Beispiel an Code kopi...