So implementieren Sie den Tab-Seitenwechsel in HTML

So implementieren Sie den Tab-Seitenwechsel in HTML: Erstellen Sie zunächst ein Div mit dem Klassennamen Wrap als Container. Erstellen Sie dann vier Label-Tags und erstellen Sie schließlich ein Div als Navigationselement.

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer.

So implementieren Sie den Tab-Seitenwechsel in HTML:

Prinzip: Zeigen Sie das entsprechende Div über die zugehörigen Attribute des Label-Tags und den Radioauswahltyp der Eingabe an

1 Erstellen Sie ein Div mit dem Klassennamen „wrap as“. einen Container

2. Erstellen Sie vier Etikettenetiketten, die als Tab-Wechselelemente dienen

3. Erstellen Sie in jedem Etikett ein Span-Etikett (Navigationsinhalt), geben Sie den Typ des Etiketts (Implementierung von Auswahl und Abwahl) auf Radio ein und erstellen Sie es a Als Navigationselement wird auf das Div geklickt, um das Inhaltsfeld anzuzeigen.

Hier ist zu beachten, dass die Namen der Eingabe-Tags identisch sein müssen. Ich habe es Tab genannt. Der endgültige HTML-Code lautet wie folgt:

rrree

Wichtiges CSS: Wenn Sie die Breite der Eingabe auf 0 setzen, ist der kleine Punkt der Eingabe unrealistisch. Durch die Zuordnung der Beschriftung wird der Klick auf das Navigationselement verwendet, um die überprüfte Eingabe und dann das entsprechende Div zu realisieren wird realisiert durch input:checked+div{display:block} Show

<div class="wrap">
    <label>
        <span>home</span>
        <input type="radio" name="tab" checked>
        <div>home-page</div>
    </label>
    <label>
        <span>list</span>
        <input type="radio" name="tab">
        <div>list-page</div>
    </label>
    <label>
        <span>news</span>
        <input type="radio" name="tab">
        <div>news-page</div>
    </label>
    <label>
        <span>mine</span>
        <input type="radio" name="tab">
        <div>mine-page</div>
    </label>
</div>

Verwandte Lernempfehlungen:

HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Tab-Seitenwechsel in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!