CSS实现导航条Tab切换的方法

　　CSS实现导航条Tab切换的方法你了解多少呢?你知道怎么才能用CSS实现导航条Tab切换吗?那么我们现在就一起去学习关于CSS实现导航条Tab切换的方法。

　　布局

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

　　【语义布局】

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

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

　　课程

　　课程内容

　　学习计划

　　学习计划内容

　　技能图谱

　　技能图谱内容

　　【视觉布局】

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

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

　　课程 学习计划 技能图谱

　　课程内容

　　学习计划内容

　　技能图谱内容

　　hover

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

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

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

　　课程

　　课程内容

　　学习计划

　　学习计划内容

　　技能图谱

　　技能图谱内容

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

　　锚点

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

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

　　【1】使用语义布局

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

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

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

　　课程内容

　　课程

　　学习计划内容

　　学习计划

　　技能图谱内容

　　技能图谱

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

　　【2】使用视觉布局

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

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

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

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

　　课程 学习计划 技能图谱

　　课程内容

　　学习计划内容

　　技能图谱内容

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

　　label

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

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

　　【1】使用语义布局

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

　　表示导航内容

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

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

　　课程

　　课程内容

　　学习计划

　　学习计划内容

　　技能图谱

　　技能图谱内容

　　[缺点]：HTML结构较复杂

　　【2】使用视觉布局

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

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

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

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

　　课程 学习计划 技能图谱

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

　　最后

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

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

　　本篇文章主要介绍了CSS实现导航条Tab切换的方法，主要包括布局、hover、label等具有一定的参考价值的内容，希望对你有所帮助。

原文链接:https://js.aizhan.com/web_authoring/css/7998.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有