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
Detaillierte Erklärung zur Verwendung von Tomcat Native zur Verbesserung der Tomcat IO-Effizienz
Inhaltsverzeichnis Einführung So stellen Sie eine...
So implementieren Sie Sveltes Defer Transition in Vue
Ich habe mir vor Kurzem Rich Harris‘ Video „Rethi...
Fünf Lösungen für Cross-Browser-Probleme (Zusammenfassung)
Kurz zusammengefasst: Browserkompatibilitätsprobl...
Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL
In MySQL können alle Felder der Typen char, varch...
Liste der HTML-Tags und Hinweise zur Verwendung
Liste der HTML-Tags markieren Typ Name oder Bedeu...
Der Unterschied zwischen Div und Tabelle in Geschwindigkeit, Laden, Webanwendung usw.
1: Unterschiede bei Geschwindigkeit und Lademethod...
Die Fallstricke und Lösungen, die durch den Standardwert von sql_mode in MySQL 5.7 verursacht werden
Während der normalen Projektentwicklung, wenn die...
Verwenden Sie Grafana+Prometheus, um die Leistung des MySQL-Dienstes zu überwachen
Offizielle Website von Prometheus (auch Prometheu...
Eine umfassende Analyse der Möglichkeiten von Nginx
Vorwort Dieser Artikel konzentriert sich nur dara...
CSS-Box ausblenden/einblenden und dann den Implementierungscode der obersten Ebene
.imgbox{ Breite: 1200px; Höhe: 612px; Rand rechts...
Details zum TypeScript-Mapping-Typ
Inhaltsverzeichnis 1. Zugeordnete Typen 2. Mappin...
MySQL-Transaktions-Tutorial Yii2.0 Händler-Auszahlungsfunktion
Vorwort Ich bin ein PHP-Programmierer, der als Pr...
Implementierung des Durchklickens des transparenten Bereichs unregelmäßiger Formen in Electron
Inhaltsverzeichnis Implementierung einer unregelm...
Detaillierte Erklärung der Zeit- und Datumsverarbeitung von moment.js
Konvertierung des Zeitformats von Montag auf Sonn...
Vue implementiert eine Formularvalidierungsfunktion
Dieser Artikel beschreibt hauptsächlich, wie die ...