Maison > interface Web > tutoriel CSS > le corps du texte

Exemple de changement d'onglet en utilisant du CSS3 pur

高洛峰
Libérer: 2017-03-02 15:13:54
original
2685 Les gens l'ont consulté

Jetons d'abord un coup d'oeil aux rendus

Exemple de changement donglet en utilisant du CSS3 pur

Cible de pseudo-classe CSS3
Utiliser les caractéristiques de target , vous pouvez obtenir un changement d'effet d'onglet CSS pur

L'exemple de code est le suivant

Le code est le suivant :

   <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>
Copier après la connexion

Le plus important Le code de

est le suivant :

#tab1:target,#tab2:target,#tab3:target{
    z-index:1;
}
Copier après la connexion


Premier lien d'ancrage vers le p correspondant en fonction des caractéristiques de la cible, puis modifiez-la en fonction de l'attribut de z-index La relation hiérarchique de p, obtenant ainsi l'effet de changement de tabulation !

Compatibilité cible
Enfin, permettez-moi de mentionner le problème de compatibilité : comme il s'agit d'une nouvelle fonctionnalité de CSS3, elle n'est pas compatible avec les anciennes versions des navigateurs, comme IE678.

Résumé
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il pourra être utile aux études ou au travail de chacun. Si vous avez des questions, vous pouvez laisser un. message à communiquer.


Pour plus d'exemples de changement d'onglet utilisant du CSS3 pur, veuillez faire attention au site Web PHP chinois !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal