Three ways to implement tab switching in navigation bar using CSS
高洛峰
Release： 2017-02-20 11:40:26
Original
2279 people have browsed it
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
<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
<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 contentz-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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">Copy after login</div></div> [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
<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，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
<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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
