前面的话

  导航条Tab在页面中非常常见，本文说详细介绍CSS实现导航条Tab的三种方法

布局

  根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局

【语义布局】

  从语义布局的角度来看，每一个导航标题和其对应的导航内容应该是一个整体

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

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

</div>

【视觉布局】

  从视觉布局的角度来看，所有导航标题为一组，所有导航内容为一组

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

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

</div>

hover

  导航条的功能就是点击导航标题时，显示对应的导航内容。如果使用伪类hover实现类似效果，使用第一种布局方式语义布局比较合适

  由于在语义布局中，三个导航内容是处于重叠的状态。移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面

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

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

</div>

  [缺点]：初始状态时，第一个导航标题无法实现默认被选中的状态(背景白色，无下划线)；鼠标移出导航模块时，导航内容部分无法固定，显示第一个导航内容；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

锚点

  实现导航条的关键就在于如何建立导航标题与导航内容之间的联系，而锚点就可以实现类似效果。通过点击锚点，页面生成一个哈希值，然后跳转到相应内容的位置

  使用锚点技术时，使用语义布局和视觉布局都可以实现

【1】使用语义布局

  使用语义布局时，可以使用伪类target，通过target选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将导航标题的HTML结构移到导航内容的下面

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

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

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

</div>

  [缺点]：初始态默认选中的导航标题样式无法设置；改变了HTML结构；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动

【2】使用视觉布局

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

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

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

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

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

</div>

  [缺点]：初始态默认选中的导航标题样式无法设置；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

label

  上面使用锚点技术来联系导航标题和导航内容，而label也可以实现类似的效果。label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上

  使用label时，使用语义布局和视觉布局都可以实现

【1】使用语义布局

  使用语义布局时，使用label标签来显示导航标题，且需要配合使用单选按钮<input type="radio">。使用伪类checked，通过checked选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将单选按钮放在每个.navI元素里的最上层，然后设置display:none，接下来是<label>表示导航标题，最后是<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>

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

</div>

  [缺点]：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>

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

</div>

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

最后

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

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

  欢迎交流

CSS实现导航条Tab的三种方法的更多相关文章

  1. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  2. 用css伪类制作三角形的三种方法

    在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...

  3. css不定高图文垂直居中的三种方法

    html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg. ...

  4. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  6. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  7. 设置css三种方法的优先级

    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...

  8. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  9. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

随机推荐

  1. C++在const用法

    注意 const对象默觉得文件的局部变量 在全局作用域里定义非const变量时,它在整个程序中都能够訪问.我们能够把一个非const变量定义在一个文件里,如果已经做了合适的声明,就能够在另外的文件里使 ...

  2. DDD分层架构之值对象（介绍篇）

    DDD分层架构之值对象(介绍篇) 前面介绍了DDD分层架构的实体,并完成了实体层超类型的开发,同时提供了验证方面的支持.本篇将介绍另一个重要的构造块——值对象,它是聚合中的主要成分. 如果说你已经在使 ...

  3. GIMP也疯狂之动态图的制作（三）

    Note:本篇文章内容为linux下利用gimp和其它工具组合完成截取制作GIF图的一种实现,制作更为灵活,但并不方便,如果不需要那么高的定制性,并追求方便高效.可以使用类似QQ影音之类的软件,自带截 ...

  4. 批处理中set截取字符具体解释

    set截取字符具体解释  在批处理中,set的功能有点繁杂:设置变量.显示环境变量的名及值.做算术运算.等待用户的输入.字符串截取.替换字符串,是我们经常使用的命令之中的一个. 在字符串截取方面,新手 ...

  5. JQuery的两个each方法的注意点

    Jquery官网上两个each用法: http://api.jquery.com/jQuery.each/ http://api.jquery.com/each/ 使用时注意点 <!DOCTYP ...

  6. MVC 控制器

    ASP.NET MVC控制器(一) 前言 在路由的篇章中讲解了路由的作用,讲着讲着就到了控制器部分了,从本篇开始来讲解MVC中的控制器,控制器是怎么来的?MVC框架对它做了什么?以及前面有的篇幅所留的 ...

  7. Windows Live Writer 完成开源并推出开源分支

    原文:Announcing Open Live Writer - An Open Source Fork of Windows Live Writer Windows Live Writer是一款发布 ...

  8. 用Python复习离散数学（二）

    这次复习的是计数问题,立刻走起吧! 1.乘法原理 如果一项工作需要t步完成的,第一步有n1种不同的选择,第二步有n2种不同的选择,……,第t步有nt中不同的选择,那么完成这项工作所有可能的选择种数为: ...

  9. Azure的两种关系型数据库服务：SQL Azure与SQL Server VM的不同

    Azure的两种关系型数据库服务:SQL Azure与SQL Server VM的不同 <Windows Azure Platform 系列文章目录> 如果熟悉Windows Azure平 ...

  10. 【C基础】const用法

    1.const 和 define 异同 同:const 和 define都是修饰常量 异:const修饰的常量只是编译器的一种优化,它是可以通过内存地址修改const修饰的常量:而define修饰的常 ...