Heim > Web-Frontend > CSS-Tutorial > Beispiel für Tab-Wechsel mit reinem CSS3

Beispiel für Tab-Wechsel mit reinem CSS3

高洛峰
Freigeben: 2017-03-02 15:13:54
Original
2694 Leute haben es durchsucht

Werfen wir zunächst einen Blick auf die Renderings

Beispiel für Tab-Wechsel mit reinem CSS3

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>
Nach dem Login kopieren

Das Wichtigste Der Code von

lautet wie folgt:

#tab1:target,#tab2:target,#tab3:target{
    z-index:1;
}
Nach dem Login kopieren


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!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage