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
js implementiert Array-Abflachung
Inhaltsverzeichnis So reduzieren Sie ein Array 1....
Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue
Inhaltsverzeichnis 1. beforeunload-Ereignis 2. Er...
Grafisches Tutorial zur Maven-Installation und -Konfiguration unter Windows (einschließlich lokalisierter Warehouse-Konfiguration)
1. Maven herunterladen Offizielle Maven-Website: ...
Gogs+Jenkins+Docker automatisierte Bereitstellung von .NetCore-Schritten
Inhaltsverzeichnis Umgebungsbeschreibung Docker-I...
MySQL-Transaktionsdetails
Inhaltsverzeichnis Einführung Vier Merkmale von T...
SVN-Installation und grundlegende Bedienung (grafisches Tutorial)
Inhaltsverzeichnis 1. Was ist SVN? 2. Methoden zu...
Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen
Inhaltsverzeichnis Startoptionen Befehlszeile Lan...
Beispiel für die Migration einer MySQL-Online-Protokollbibliothek
Ich möchte Ihnen von einem aktuellen Fall erzähle...
Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen
Dieser Artikel fasst die Implementierungsmethoden...
15 Zeilen CSS-Code können zum Absturz von Apple-Geräten führen, und das neueste iOS 12 ist nicht immun
Nur 15 Zeilen CSS und Ihr iPhone stürzt ab Der Si...
HTML-Sonderzeichen-Konvertierungstabelle
Charakter Dezimal Zeichennummer Entitätsname --- ...
Installieren Sie das Linux-System automatisch basierend auf Cobbler
1. Komponenten installieren yum install epel-rpm-...
Zwei Möglichkeiten zum Zurücksetzen des Root-Passworts einer MySQL-Datenbank mit lnmp
Die erste Methode: Verwenden Sie Junges Ein-Klick...
Implementierung der Docker-Container-Statuskonvertierung
Ein Zustandsübergangsdiagramm eines Docker-Contai...
Eine Screenshot-Demo basierend auf Canvas in HTML
Geschrieben am Anfang Ich erinnere mich, dass ich...