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
Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React
Inhaltsverzeichnis Installieren und Einführen von...
Der Unterschied und die Verwendung von json.stringify() und json.parse()
1. Unterschiede zwischen JSON.stringify() und JSO...
Detaillierte Erklärung der vier Arten von MySQL-Verbindungen und Multi-Table-Abfragen
Inhaltsverzeichnis MySQL Inner Join, Left Join, R...
Analyse der Verwendung von „replace“ und „regexp“ zum Ersetzen regulärer Ausdrücke in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...
So verhindern Sie Event-Bubbling in JavaScript
Wir müssen darauf achten, dass die Eigenschaften ...
Detaillierte Erklärung zur Verwendung von Javascript zur Behandlung allgemeiner Ereignisse
Inhaltsverzeichnis 1. Formularereignisse 2. Mause...
Vue-Vorlagenkonfiguration und Webstorm-Codeformatspezifikationseinstellungen
Inhaltsverzeichnis 1. Einstellungen für die Spezi...
Zusammenfassung der Erfahrungen und Fähigkeiten von Webdesignern beim Erlernen von Webdesign
Da der Einfluss des Unternehmens wächst und seine...
Analyse des Projektverlaufs bei der Ideenverpackung und beim Hochladen in den Cloud-Dienst
eins. Zuerst müssen Sie es in eine Idee verpacken...
So verstehen Sie die Modularität von JavaScript
Inhaltsverzeichnis 1. Browserunterstützung 2. Exp...
Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.18.zip (Windows 64 Bit)
Informationen zum Deinstallieren der zuvor instal...
js zur Implementierung eines Web-Rechners
Wie erstelle ich mit HTML, CSS und JS einen einfa...
MySQL-Abfragedaten stündlich, geben Sie 0 ein, wenn keine Daten vorhanden sind
Nachfragehintergrund Als statistische Schnittstel...
Zusammenfassung der wichtigsten Wissenspunkte zur MySQL-Abfrageoptimierung
Vorwort Abfrageoptimierung ist nichts, was über N...
Beispiele für minimalistisches Website-Design
Webanwendungsklasse 1. DownFürAlleOderNurIch Mith...