Three ways to implement tab switching in navigation bar using CSS

Previous words

<p>  Navigation bar Tab is very common on the page. This article introduces in detail the three methods of CSS to implement navigation bar Tab

<p>

Layout

<p>

<p> According to the above figure, we first stipulate a few definitions. The entire module in the above figure is called navigation, which consists of navigation title and navigation content. To achieve the layout effect shown in the figure above, there are two layout methods: semantic layout and visual layout

<p>[Semantic Layout]

<p> From the perspective of semantic layout, each navigation title and The corresponding navigation content should be a whole

<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>[Visual layout]

<p> 　From the perspective of visual layout, all navigation titles are one group and all navigation content is one group

<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> The function of the navigation bar is to display the corresponding navigation content when you click on the navigation title. If you use the pseudo-class hover to achieve a similar effect, it is more appropriate to use the first layout method, semantic layout

<p>  Because in the semantic layout, the three navigation contents are in an overlapping state. When moving into its parent element .navI, the hover state of the mouse is triggered, and the style added to the parent element is position:relative;z-index:1;. Thus raising the levelz-index. In the hierarchical competition of the navigation content of its child elements, "the child is more valuable than the father". If the parent element has a high level, its navigation content is displayed at the top in the overlapping state

<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>  [Disadvantage]: In the initial state, The first navigation title cannot achieve the default selected state (white background, no underline); when the mouse moves out of the navigation module, the navigation content part cannot be fixed and the first navigation content is displayed; when the mouse moves out of the navigation module, the style of the navigation title cannot be Fixed, restored to default state

<p>

Anchor point

<p> The key to realizing the navigation bar is how to establish the connection between the navigation title and the navigation content, and the anchor point can Achieve similar effects. By clicking the anchor point, the page generates a hash value and then jumps to the location of the corresponding content

<p> 　When using anchor point technology, it can be achieved using both semantic layout and visual layout

<p>【1】 Use semantic layout

<p>  When using semantic layout, you can use the pseudo class target and use the target selector to change the style of the current title when you click on the navigation title. Not only that, because you want to use the sibling selector, you need to change the HTML structure and move the HTML structure of the navigation title below the navigation content. Change the level of the corresponding navigation content

z-index<p>, so that the current navigation content wins among the three navigation contents and is displayed on the top layer; at the same time, change the style of the current navigation title<pre class="brush:php;toolbar:false">&lt;style&gt; 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 &quot;微软雅黑&quot;;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;} &lt;/style&gt; &lt;p class=&quot;box&quot;&gt;     &lt;ul class=&quot;nav&quot;&gt;         &lt;li class=&quot;navI navI_active&quot;&gt;             &lt;p class=&quot;navI-txt&quot; id=&quot;kc&quot;&gt;课程内容&lt;/p&gt;             &lt;a class=&quot;navI-tit&quot; href=&quot;#kc&quot;&gt;课程&lt;/a&gt;         &lt;/li&gt;         &lt;li class=&quot;navI&quot;&gt;             &lt;p class=&quot;navI-txt ml1&quot; id=&quot;xx&quot;&gt;学习计划内容&lt;/p&gt;             &lt;a class=&quot;navI-tit&quot; href=&quot;#xx&quot;&gt;学习计划&lt;/a&gt;         &lt;/li&gt;         &lt;li class=&quot;navI&quot;&gt;             &lt;p class=&quot;navI-txt ml2&quot; id=&quot;jn&quot;&gt;技能图谱内容&lt;/p&gt;             &lt;a class=&quot;navI-tit&quot; href=&quot;#jn&quot;&gt;技能图谱&lt;/a&gt;         &lt;/li&gt;     &lt;/ul&gt;    &lt;/p&gt;</pre>  [Disadvantages]: The navigation title style selected by default in the initial state cannot be set; the HTML structure is changed; the limitation of the anchor technology itself is that the anchor target will reach as high as possible above the visible area, which may cause page jumps【2】Use visual layout

<p> In visual layout, the three navigation contents belong to the same parent element, have the same height as the parent element, and are arranged according to the arrangement of block-level elements. When the parent element is set to overflow and hide, only the first navigation content is displayed by default

<p> When the navigation title is clicked, the corresponding navigation content reaches below the navigation title row, achieving the effect of navigation switching

<p>  Use pseudo Class

hover<p> to achieve the effect of changing the current navigation title style

<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>  [Disadvantages]: The navigation title style selected by default in the initial state cannot be set; the limitation of the anchor point technology itself is that the anchor point target will Try to reach the top of the visible area as much as possible, which may cause the page to jump; the hover state and the click state are separated, which may make people dizzy; when the mouse moves out of the navigation module, the style of the navigation title cannot be fixed and returns to the default state

<p>label

<p>  The above uses anchor point technology to connect the navigation title and navigation content, and

label

can also achieve similar effects. The

label<p> element defines the label for the input element and establishes the association between the text label and the form control. Clicking on the text within the label element will trigger this control. When the text is selected, the browser will automatically turn the focus to the form control related to the label Use label When using semantic layout, it can be achieved by using both semantic layout and visual layout. Use radio buttons

<p>. Use the pseudo class checked and use the

checked<p> selector to change the style of the current title when the navigation title is clicked. Not only that, because you want to use the sibling selector, you need to change the HTML structure, put the radio button at the top of each

.navI<p> element, and then set display:none, Next is <label> indicating the navigation title, and finally <p> indicating the navigation content<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中文网！