Trois façons d'implémenter le changement d'onglet dans la barre de navigation à l'aide de CSS-tutoriel CSS-php.cn

Les mots précédents

L'onglet de la barre de navigation est très courant sur la page Cet article présente en détail les trois méthodes CSS pour implémenter l'onglet de la barre de navigation

Mise en page.

Sur la base de la figure ci-dessus, stipulons d'abord quelques définitions. L'ensemble du module de la figure ci-dessus est appelé navigation, qui comprend le titre de navigation et le contenu de la navigation. Pour obtenir l'effet de mise en page montré dans l'image ci-dessus, il existe deux méthodes de mise en page : la mise en page sémantique et la mise en page visuelle

【Mise en page sémantique】

Du point de vue de la mise en page sémantique, chaque titre de navigation et Le le contenu de navigation correspondant doit être un tout

<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;}
</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>

Copier après la connexion

【Mise en page visuelle】

Du point de vue de la mise en page visuelle, tous les titres de navigation forment un groupe et tout le contenu de navigation est un groupe

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
.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;text-indent: 2em; line-height: 2;}
.nav-txtI{height: 200px;}
</style>

<p class="box">
    <nav class="nav-tit">
        <a class="nav-titI">课程</a>
        <a class="nav-titI">学习计划</a>
        <a class="nav-titI">技能图谱</a>
    </nav>
    <ul class="nav-txt">
        <li class="nav-txtI nav-txtI_active">课程内容</li>
        <li class="nav-txtI">学习计划内容</li>
        <li class="nav-txtI">技能图谱内容</li>
    </ul>
</p>

Copier après la connexion

survol

La fonction de la barre de navigation est d'afficher le contenu de navigation correspondant lorsque vous cliquez sur le titre de navigation. Si vous utilisez la classe pseudo-survol pour obtenir un effet similaire, il est plus approprié d'utiliser la première méthode de mise en page, la mise en page sémantique

Car dans la mise en page sémantique, les trois contenus de navigation se chevauchent. Lors du déplacement vers son élément parent .navI, l'état de survol de la souris est déclenché et le style de l'élément parent est ajouté comme position:relative;z-index:1;. Augmentant ainsi 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 élevé, son contenu de navigation est 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>

Copier après la connexion

[Inconvénients] : État initial Lorsque la souris est déplacée hors du module de navigation, la partie du contenu de navigation ne peut pas être corrigée et le premier contenu de navigation est affiché lorsque la souris est déplacée hors du module de navigation, le titre de navigation ; is Le style ne peut pas être corrigé et sera restauré à l'état par défaut

Point d'ancrage

La clé pour implémenter la barre de navigation est de savoir comment établir la connexion entre la navigation le titre et le contenu de la navigation, ainsi que le point d'ancrage. Un effet similaire peut être obtenu. En cliquant sur le point d'ancrage, la page génère une valeur de hachage puis passe à l'emplacement du contenu correspondant

Lors de l'utilisation de la technologie d'ancrage, cela peut être réalisé en utilisant à la fois la disposition sémantique et la disposition visuelle

【1】 Utiliser la disposition sémantique

Lorsque vous utilisez la disposition sémantique, vous pouvez utiliser la pseudo classe target et utiliser le sélecteur target pour changer le style du titre actuel lorsque vous cliquez sur le titre de navigation. De plus, parce que vous souhaitez utiliser le sélecteur de frères et sœurs, vous devez modifier la structure HTML et déplacer la structure HTML du titre de navigation sous le contenu de navigation

Lorsque vous cliquez sur le titre de navigation, le target la pseudo-classe est déclenchée et la navigation correspondante est modifiée. Le niveau de contenu z-index, de sorte que le contenu de navigation actuel l'emporte parmi les trois contenus de navigation et soit affiché au niveau supérieur en même temps, change le style du contenu de navigation actuel ; titre de navigation

<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>

Copier après la connexion

[Inconvénients] : État initial Le style de titre de navigation sélectionné par défaut ne peut pas être défini ; la structure HTML est modifiée, la limite de la technologie de point d'ancrage elle-même est que la cible du point d'ancrage atteindra ; le plus haut possible au-dessus de la zone visible, ce qui peut provoquer des sauts de page

【2】Utiliser la mise en page visuelle

Dans la mise en page visuelle, les trois contenus de navigation appartiennent au même élément parent, ont le même hauteur que l'élément parent et sont disposés en fonction de la disposition des éléments au niveau du bloc. Lorsque l'élément parent est défini sur débordement et masqué, la valeur par défaut Seul le premier contenu de navigation est affiché

Lorsque vous cliquez sur la navigation. titre, le contenu de navigation correspondant atteint en dessous de la ligne de titre de navigation, obtenant l'effet de changement de navigation

Utilisation de pseudo-classes hover pour modifier l'effet actuel du style de titre de navigation

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
.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;text-indent: 2em; line-height: 2;}
.nav-txtI{height: 200px;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: white;border-bottom: none;}
</style>

<p class="box">
    <nav class="nav-tit">
        <a class="nav-titI" href="#kc">课程</a>
        <a class="nav-titI" href="#xx">学习计划</a>
        <a class="nav-titI" href="#jn">技能图谱</a>
    </nav>
    <ul class="nav-txt">
        <li class="nav-txtI nav-txtI_active" id="kc">课程内容</li>
        <li class="nav-txtI" id="xx">学习计划内容</li>
        <li class="nav-txtI" id="jn">技能图谱内容</li>
    </ul>
</p>

Copier après la connexion

[Inconvénients] : Le style de titre de navigation sélectionné par défaut dans l'état initial ne peut pas être défini ; la limitation de la technologie du point d'ancrage elle-même est que la cible du point d'ancrage atteindra le plus haut possible au-dessus de la zone visible, ainsi La page peut sauter ; l'état de survol et l'état de clic sont séparés, ce qui peut donner le vertige ; lorsque la souris sort du module de navigation, le style du titre de navigation ne peut pas être corrigé et revient à l'état par défaut

étiquette

La technologie du point d'ancrage est utilisée ci-dessus pour connecter le titre de navigation et le contenu de la navigation, et label peut également obtenir un effet similaire. L'élément label définit l'étiquette de l'élément input et établit l'association entre l'étiquette de texte et le contrôle de formulaire. Cliquer sur le texte dans l'élément label déclenchera ce contrôle. Lorsque le texte est sélectionné, le navigateur mettra automatiquement le focus sur le contrôle de formulaire lié à l'étiquette

Lors de l'utilisation de label, utilisez la disposition sémantique. et mise en page visuelle Tout peut être réalisé

【1】Utiliser la mise en page sémantique

Lorsque vous utilisez la mise en page sémantique, utilisez la balise label pour afficher le titre de navigation, et vous devez utiliser le bouton radio <input type="radio">. Utilisez la pseudo-classe checked et utilisez le sélecteur checked pour changer le style du titre actuel lorsque vous cliquez sur le titre de navigation. De plus, parce que vous souhaitez utiliser le sélecteur de frères et sœurs, vous devez modifier la structure HTML, placer le bouton radio en haut de chaque élément .navI, puis définir display:none, suivi de <label> pour représenter la navigation. titre, et enfin Oui  indique le contenu de la navigation

点击导航标题时，触发checked伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}  
input{margin: 0;width: 0;} 
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{display:block;line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{position:relative;width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
/*重点代码*/
.navI-radio{display:none;}
.navI-radio:checked + .navI-tit{background:#fff;border-bottom:none;}
.navI-radio:checked ~ .navI-txt{z-index:1;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="kc" checked>
            <label class="navI-tit" for="kc">课程</label>            
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="xx">
            <label class="navI-tit" for="xx">学习计划</label>            
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="jn">
            <label class="navI-tit" for="jn">技能图谱</label>            
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

Copier après la connexion

[缺点]：HTML结构较复杂

【2】使用视觉布局

在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容

点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果

使用伪类hover来实现改变当前导航标题样式的效果

<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>

Copier après la connexion

[缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态