Beispiel für Tab-Wechsel mit reinem CSS3

Werfen wir zunächst einen Blick auf die Renderings

CSS3-Pseudoklassenziel
Verwendung Mit den Eigenschaften von target können Sie eine reine CSS-Tab-Effektumschaltung erreichen

Der Beispielcode lautet wie folgt

Der Code lautet wie folgt:

   <style type="text/css">
        .tabmenu{
            position:absolute;
            top:-28px;
            left:144px;
            margin:0px;
        }
        .tabmenu li{
            display:inline-block;
        }
        .tabmenu li a{
            display:block;
            padding:5px 10px;
            margin:0 10px 0 0;
            border:1px solid #91a7b4;
            border-radius:5px 5px 0 0;
            background-color:#e3f1f8;
            color:#333;
            text-decoration: none;
            font-size:16px;
        }
        .tablist{
            position:relative;
            top:200px;
            margin:0 auto;
            width:600px;
            min-height:200px;
        }
        .tab_content{
            position:absolute;
            width:600px;
            height:170px;
            padding:15px;
            border:1px solid #91a7b4;
            border-radius:10px;
            box-shadow:0 2px 3px rgba(0,0,0,0,1);
            font-size:16px;
            line-height:16px;
            color:#666;
            background-color:#fff;
        }
        #tab1:target,#tab2:target,#tab3:target{
            z-index:1;
        }
    </style>
    <p class="tablist">
        <ul class="tabmenu">
            <li><a href="#tab1">tab1</a></li>
            <li><a href="#tab2">tab2</a></li>
            <li><a href="#tab3">tab3</a></li>
        </ul>
        <p id="tab1" class="tab_content">tab1</p>
        <p id="tab2" class="tab_content">tab2</p>
        <p id="tab3" class="tab_content">tab3</p>
    </p>

Das Wichtigste Der Code von

lautet wie folgt:

#tab1:target,#tab2:target,#tab3:target{
    z-index:1;
}

Erster Ankerlink zum entsprechenden S entsprechend den Eigenschaften des Ziels und ändern Sie es dann entsprechend dem Attribut des Z-Index. Die hierarchische Beziehung von p, wodurch der Tab-Switching-Effekt erzielt wird!

Zielkompatibilität
Abschließend möchte ich das Kompatibilitätsproblem erwähnen: Da es sich um eine neue Funktion von CSS3 handelt, ist sie nicht mit älteren Browserversionen wie IE678 kompatibel.

Zusammenfassung
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann für das Studium oder die Arbeit von Nutzen sein. Wenn Sie Fragen haben, können Sie eine hinterlassen Nachricht zu kommunizieren.

Weitere Beispiele für den Tab-Wechsel mit reinem CSS3 finden Sie auf der chinesischen PHP-Website!