Partage de code sur la façon dont CSS implémente le changement de page d'onglet

Nous avons partagé avec vous une grande partie de la fonction de changement de page d'onglet. Dans cet article, nous vous présentons principalement l'exemple de code de changement de page d'onglet CSS. Les amis qui en ont besoin peuvent s'y référer. toi.

1.hover

Lors du passage dans son élément parent .navI, déclenchez l'état de survol de la souris et ajoutez le style position:relative à l'élément parent ;z-index:1;. Cela augmente le niveau z-index. Dans la compétition hiérarchique du contenu de navigation de ses éléments enfants, "l'enfant a plus de valeur que le père". Si l'élément parent a un niveau supérieur, son contenu de navigation sera affiché en haut dans l'état de chevauchement

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:relative;z-index:1;}
/*重点代码*/
.navI:hover{position:relative;z-index:1;}
.navI:hover .navI-tit{background:#fff;border-bottom:none;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <h2 class="navI-tit">课程</h2>
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">学习计划</h2>
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">技能图谱</h2>
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

2. Point d'ancrage

Lorsque l'on clique sur le titre de navigation, la pseudo-classe cible est déclenchée. et l'index z du contenu de navigation correspondant est modifié, faisant ainsi en sorte que la navigation actuelle Le contenu gagne parmi les trois contenus de navigation et est affiché sur la couche supérieure en même temps, change le style du titre de navigation actuel

 ;

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;position:relative;}
.navI-tit{position:absolute;top:0;left:0;right:0;box-sizing: border-box;line-height: 40px;height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;margin-top: 40px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{z-index:1;}
/*重点代码*/
.navI-txt:target{position:relative;z-index:1;}
.navI-txt:target ~ .navI-tit{background:#fff;border-bottom:none;}
</style>
<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <p class="navI-txt" id="kc">课程内容</p>
            <a class="navI-tit" href="#kc">课程</a>
        </li>
        <li class="navI">
            <p class="navI-txt ml1" id="xx">学习计划内容</p>
            <a class="navI-tit" href="#xx">学习计划</a>
        </li>
        <li class="navI">
            <p class="navI-txt ml2" id="jn">技能图谱内容</p>
            <a class="navI-tit" href="#jn">技能图谱</a>
        </li>
    </ul>   
</p>

3. radio

Lorsque l'on clique sur le titre de navigation, la pseudo-classe cochée est déclenchée et le z-index du contenu de navigation correspondant est modifié, de sorte que le contenu de navigation actuel l'emporte parmi les trois contenus de navigation et soit en haut de l'affichage en même temps, changez le style du titre de navigation actuel

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
input{margin: 0;padding: 0;border:none;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;}
.nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: #fff;border-bottom:none;}
</style>
<p class="box">
    <nav class="nav-tit">
        <label class="nav-titI" for="kc">课程</label>
        <label class="nav-titI" for="xx">学习计划</label>
        <label class="nav-titI" for="jn">技能图谱</label>
    </nav>
    <nav class="nav-txt">
        <input class="nav-txtI nav-txtI_active" id="kc" value="课程内容" readonly>
        <input class="nav-txtI" id="xx" value="学习计划内容" readonly>
        <input class="nav-txtI" id="jn" value="技能图谱内容" readonly>
    </nav>
</p>

Recommandations associées :

Page de l'onglet de l'applet WeChat Introduction détaillée au changement de données de mise à jour

Exemple de changement de page d'onglet du navigateur de surveillance JS

Utilisation de la technologie jQuery pour implémenter l'interface de la page à onglets 2_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!