Drei Möglichkeiten, den Tab-Wechsel in der Navigationsleiste mithilfe von CSS zu implementieren

Die vorherigen Wörter

<p>Navigationsleisten-Tabs sind auf der Seite sehr verbreitet. In diesem Artikel werden die drei CSS-Methoden zum Implementieren der Navigationsleisten-Tabs ausführlich vorgestellt

<p>

Layout

<p>

<p>  Basierend auf der obigen Abbildung legen wir zunächst einige Definitionen fest. Das gesamte Modul in der obigen Abbildung heißt Navigation und besteht aus Navigationstitel und Navigationsinhalt. Um den im Bild oben gezeigten Layouteffekt zu erzielen, gibt es zwei Layoutmethoden: semantisches Layout und visuelles Layout

<p>【Semantisches Layout】

<p>  Aus der Perspektive des semantischen Layouts sind jeder Navigationstitel und die Der entsprechende Navigationsinhalt sollte ein Ganzes sein

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

<p>【Visuelles Layout】

<p>  Aus Sicht des visuellen Layouts sind alle Navigationstitel eine Gruppe und alle Navigationsinhalte eine Gruppe

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

<p>

hover

<p>  Die Funktion der Navigationsleiste besteht darin, den entsprechenden Navigationsinhalt anzuzeigen, wenn Sie auf den Navigationstitel klicken. Wenn Sie die Pseudo-Hover-Klasse verwenden, um einen ähnlichen Effekt zu erzielen, ist es besser, die erste Layoutmethode, das semantische Layout, zu verwenden.

<p>  Da sich im semantischen Layout die drei Navigationsinhalte in einem überlappenden Zustand befinden. Beim Bewegen in das übergeordnete Element .navI wird der Hover-Status der Maus ausgelöst und der Stil des übergeordneten Elements wird als position:relative;z-index:1; hinzugefügt. Dadurch wird das Niveau erhöhtz-index. Im hierarchischen Wettbewerb der Navigationsinhalte seiner untergeordneten Elemente gilt: „Das Kind ist wertvoller als das Vaterelement.“ Wenn das übergeordnete Element eine hohe Ebene hat, wird sein Navigationsinhalt im überlappenden Zustand oben angezeigt

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

<p>  [Nachteile]: Ausgangszustand Wenn die Maus aus dem Navigationsmodul herausbewegt wird, kann der Navigationsinhaltsteil nicht fixiert werden und der erste Navigationsinhalt wird angezeigt, wenn die Maus aus dem Navigationsmodul herausbewegt wird; ist Der Stil kann nicht repariert werden und wird auf den Standardzustand zurückgesetzt

<p>

Ankerpunkt

<p>  Der Schlüssel zur Implementierung der Navigationsleiste liegt darin, wie die Verbindung zwischen der Navigation hergestellt wird Titel und Navigationsinhalt sowie Ankerpunkt. Ein ähnlicher Effekt kann erzielt werden. Durch Klicken auf den Ankerpunkt generiert die Seite einen Hashwert und springt dann zum Speicherort des entsprechenden Inhalts

<p>  Bei Verwendung der Ankertechnologie kann dies sowohl durch semantisches Layout als auch durch visuelles Layout erreicht werden

<p>【1】 Semantisches Layout verwenden

<p>  Wenn Sie semantisches Layout verwenden, können Sie die Pseudoklasse target verwenden und den target-Selektor verwenden, um den Stil des aktuellen Titels zu ändern, wenn Sie auf den Navigationstitel klicken. Darüber hinaus müssen Sie, da Sie den Geschwisterselektor verwenden möchten, die HTML-Struktur ändern und die HTML-Struktur des Navigationstitels unter den Navigationsinhalt verschieben

<p> Wenn Sie auf den Navigationstitel klicken, wird das target angezeigt Die Pseudoklasse wird ausgelöst und die entsprechende Navigationsebene z-index geändert, sodass der aktuelle Navigationsinhalt unter den drei Navigationsinhalten gewinnt und gleichzeitig auf der obersten Ebene angezeigt wird Navigationstitel

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

<p> [Nachteile]: Der standardmäßig ausgewählte Navigationstitelstil kann nicht geändert werden. Die Einschränkung der Ankerpunkttechnologie selbst besteht darin, dass das Ankerpunktziel erreicht wird möglichst hoch über dem sichtbaren Bereich, was zu Seitensprüngen führen kann

<p>【2】Visuelles Layout verwenden

<p>  Im visuellen Layout gehören die drei Navigationsinhalte zum selben übergeordneten Element gleiche Höhe wie das übergeordnete Element und entsprechend der Anordnung der Elemente auf Blockebene angeordnet. Wenn das übergeordnete Element auf „Überlauf“ und „Ausgeblendet“ eingestellt ist, wird standardmäßig nur der erste Navigationsinhalt angezeigt

<p>  Beim Klicken auf die Navigation Titel, der entsprechende Navigationsinhalt reicht unter die Navigationstitelzeile und erzielt den Effekt des Navigationswechsels

<p> Verwenden von Pseudoklassen hover zum Ändern des aktuellen Effekts des Navigationstitelstils

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

<p> [Nachteile]: Der im Anfangszustand standardmäßig ausgewählte Navigationstitelstil kann nicht festgelegt werden. Die Einschränkung der Ankerpunkttechnologie selbst besteht darin, dass das Ankerpunktziel so weit wie möglich über den sichtbaren Bereich reicht springen; der Hover-Status und der Klick-Status sind getrennt, was dazu führen kann, dass den Leuten schwindelig wird; der Stil des Navigationstitels kann nicht korrigiert werden und kehrt zum Standardstatus zurück

<p>

Label

<p> Die Ankerpunkttechnologie wird oben verwendet, um den Navigationstitel und den Navigationsinhalt zu verbinden, und label kann auch einen ähnlichen Effekt erzielen. Das label-Element definiert die Beschriftung für das input-Element und stellt die Zuordnung zwischen der Textbeschriftung und dem Formularsteuerelement her. Durch Klicken auf den Text im label-Element wird dieses Steuerelement ausgelöst. Wenn der Text ausgewählt ist, richtet der Browser den Fokus automatisch auf das Formularsteuerelement, das sich auf die Beschriftung bezieht.

<p> Verwenden Sie bei Verwendung von label das semantische Layout und visuelles Layout Alles kann erreicht werden

<p>【1】Semantisches Layout verwenden

<p> Wenn Sie semantisches Layout verwenden, verwenden Sie das label-Tag, um den Navigationstitel anzuzeigen, und Sie müssen das Optionsfeld verwenden <input type="radio">. Verwenden Sie die Pseudoklasse checked und den Selektor checked, um den Stil des aktuellen Titels zu ändern, wenn auf den Navigationstitel geklickt wird. Darüber hinaus müssen Sie, da Sie den Geschwisterselektor verwenden möchten, die HTML-Struktur ändern, das Optionsfeld oben in jedem .navI-Element platzieren und dann display:none festlegen, gefolgt von <label>, um die Navigation darzustellen Titel und schließlich Ja <p> zeigt Navigationsinhalt an

<p>  点击导航标题时，触发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>

<p>  [缺点]：HTML结构较复杂

<p>【2】使用视觉布局

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

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

<p>  使用伪类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>

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

<p> 

最后

<p>  上面的三种方法中，实现效果最好的是使用label标签配合radio类型的input标签，通过:checked选择器来实现

<p>  在实际应用中，使用javascript的方式来控制导航条Tab的情况更为普遍

<p>更多CSS实现导航条Tab切换的三种方法 相关文章请关注PHP中文网！