posts - 104,&
comments - 10,&
trackbacks - 0
导航条Tab在页面中非常常见，本文说详细介绍CSS实现导航条Tab的三种方法
根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局
【语义布局】
从语义布局的角度来看，每一个导航标题和其对应的导航内容应该是一个整体
【视觉布局】
从视觉布局的角度来看，所有导航标题为一组，所有导航内容为一组
导航条的功能就是点击导航标题时，显示对应的导航内容。如果使用hover实现类似效果，使用第一种布局方式语义布局比较合适
由于在语义布局中，三个导航内容是处于重叠的状态。移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:z-index:1;。从而提升了。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面
[缺点]：初始状态时，第一个导航标题无法实现默认被选中的状态(背景白色，无下划线)；鼠标移出导航模块时，导航内容部分无法固定，显示第一个导航内容；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
实现导航条的关键就在于如何建立导航标题与导航内容之间的联系，而就可以实现类似效果。通过点击锚点，页面生成一个哈希值，然后跳转到相应内容的位置
使用锚点技术时，使用语义布局和视觉布局都可以实现
【1】使用语义布局
使用语义布局时，可以使用伪类target，通过target选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将导航标题的HTML结构移到导航内容的下面
点击导航标题时，触发target伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式
[缺点]：初始态默认选中的导航标题样式无法设置；改变了HTML结构；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动
【2】使用视觉布局
在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容
点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果
使用伪类hover来实现改变当前导航标题样式的效果
[缺点]：初始态默认选中的导航标题样式无法设置；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
上面使用锚点技术来联系导航标题和导航内容，而也可以实现类似的效果。label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上
使用label时，使用语义布局和视觉布局都可以实现
【1】使用语义布局
使用语义布局时，使用label标签来显示导航标题，且需要配合使用单选按钮&input type="radio"&。使用伪类checked，通过checked选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将单选按钮放在每个.navI元素里的最上层，然后设置display:none，接下来是&label&表示导航标题，最后是&p&表示导航内容
点击导航标题时，触发checked伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式
[缺点]：HTML结构较复杂
【2】使用视觉布局
在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容
点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果
使用伪类hover来实现改变当前导航标题样式的效果
[缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
上面的三种方法中，实现效果最好的是使用label标签配合radio类型的input标签，通过:checked选择器来实现
在实际应用中，使用javascript的方式来控制导航条Tab的情况更为普遍
阅读(...) 评论()导航条Tab在页面中非常常见，本文说详细介绍CSS实现导航条Tab的三种方法
根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局
【语义布局】
从语义布局的角度来看，每一个导航标题和其对应的导航内容应该是一个整体
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style:}
a{text-decoration:color:}
.box{width: 572border: 1px solid #999;overflow:}
.nav{margin-left: -1font: 14px &微软雅黑&;overflow:background-color: #f1f1f1;}
.navI{float:width: 33.333%;box-sizing: border-}
.navI-tit{line-height: 40text-align:cursor:border-left: 1px solid #border-bottom: 1px solid #}
.navI-txt{width: 572height:200text-indent:2line-height: 2;background:#}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:z-index:1;}
&div class=&box&&
&ul class=&nav&&
&li class=&navI navI_active&&
&h2 class=&navI-tit&&课程&/h2&
&p class=&navI-txt&&课程内容&/p&
&li class=&navI&&
&h2 class=&navI-tit&&学习计划&/h2&
&p class=&navI-txt ml1&&学习计划内容&/p&
&li class=&navI&&
&h2 class=&navI-tit&&技能图谱&/h2&
&p class=&navI-txt ml2&&技能图谱内容&/p&
【视觉布局】
从视觉布局的角度来看，所有导航标题为一组，所有导航内容为一组
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style:}
a{text-decoration:color:}
.box{width:572border:1px solid #999;font:14px &微软雅黑&;overflow:}
.nav-tit{margin-left: -1height: 40line-height: 40text-align:background-color: #f1f1f1;overflow:}
.nav-titI{box-sizing: border-float:width: 33.333%;border-left: 1px solid #border-bottom: 1px solid #cursor:}
.nav-txt{height: 200text-indent: 2 line-height: 2;}
.nav-txtI{height: 200}
&div class=&box&&
&nav class=&nav-tit&&
&a class=&nav-titI&&课程&/a&
&a class=&nav-titI&&学习计划&/a&
&a class=&nav-titI&&技能图谱&/a&
&ul class=&nav-txt&&
&li class=&nav-txtI nav-txtI_active&&课程内容&/li&
&li class=&nav-txtI&&学习计划内容&/li&
&li class=&nav-txtI&&技能图谱内容&/li&
导航条的功能就是点击导航标题时，显示对应的导航内容。如果使用hover实现类似效果，使用第一种布局方式语义布局比较合适
由于在语义布局中，三个导航内容是处于重叠的状态。移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:z-index:1;。从而提升了。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style:}
a{text-decoration:color:}
.box{width: 572border: 1px solid #999;overflow:}
.nav{margin-left: -1font: 14px &微软雅黑&;overflow:background-color: #f1f1f1;}
.navI{float:width: 33.333%;box-sizing: border-}
.navI-tit{line-height: 40text-align:cursor:border-left: 1px solid #border-bottom: 1px solid #}
.navI-txt{width: 572height:200text-indent:2line-height: 2;background:#}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:z-index:1;}
/*重点代码*/
.navI:hover{position:z-index:1;}
.navI:hover .navI-tit{background:#border-bottom:}
&div class=&box&&
&ul class=&nav&&
&li class=&navI navI_active&&
&h2 class=&navI-tit&&课程&/h2&
&p class=&navI-txt&&课程内容&/p&
&li class=&navI&&
&h2 class=&navI-tit&&学习计划&/h2&
&p class=&navI-txt ml1&&学习计划内容&/p&
&li class=&navI&&
&h2 class=&navI-tit&&技能图谱&/h2&
&p class=&navI-txt ml2&&技能图谱内容&/p&
[缺点]：初始状态时，第一个导航标题无法实现默认被选中的状态(背景白色，无下划线)；鼠标移出导航模块时，导航内容部分无法固定，显示第一个导航内容；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
实现导航条的关键就在于如何建立导航标题与导航内容之间的联系，而就可以实现类似效果。通过点击锚点，页面生成一个哈希值，然后跳转到相应内容的位置
使用锚点技术时，使用语义布局和视觉布局都可以实现
【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:}
a{text-decoration:color:}
.box{width: 572border: 1px solid #999;overflow:}
.nav{margin-left: -1font: 14px &微软雅黑&;overflow:background-color: #f1f1f1;}
.navI{float:width: 33.333%;box-sizing: border-position:}
.navI-tit{position:top:0;left:0;right:0;box-sizing: border-line-height: 40height: 40text-align:cursor:border-left: 1px solid #border-bottom: 1px solid #}
.navI-txt{width: 572height:200margin-top: 40text-indent:2line-height: 2;background:#}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{z-index:1;}
/*重点代码*/
.navI-txt:target{position:z-index:1;}
.navI-txt:target ~ .navI-tit{background:#border-bottom:}
&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 class=&navI&&
&p class=&navI-txt ml1& id=&xx&&学习计划内容&/p&
&a class=&navI-tit& href=&#xx&&学习计划&/a&
&li class=&navI&&
&p class=&navI-txt ml2& id=&jn&&技能图谱内容&/p&
&a class=&navI-tit& href=&#jn&&技能图谱&/a&
[缺点]：初始态默认选中的导航标题样式无法设置；改变了HTML结构；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动
【2】使用视觉布局
在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容
点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果
使用伪类hover来实现改变当前导航标题样式的效果
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style:}
a{text-decoration:color:}
.box{width:572border:1px solid #999;font:14px &微软雅黑&;overflow:}
.nav-tit{margin-left: -1height: 40line-height: 40text-align:background-color: #f1f1f1;overflow:}
.nav-titI{box-sizing: border-float:width: 33.333%;border-left: 1px solid #border-bottom: 1px solid #cursor:}
.nav-txt{height: 200text-indent: 2 line-height: 2;}
.nav-txtI{height: 200}
/*重点内容*/
.nav-txt{overflow:}
.nav-titI:hover{background-color:border-bottom:}
&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&
&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&
[缺点]：初始态默认选中的导航标题样式无法设置；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
上面使用锚点技术来联系导航标题和导航内容，而也可以实现类似的效果。label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上
使用label时，使用语义布局和视觉布局都可以实现
【1】使用语义布局
使用语义布局时，使用label标签来显示导航标题，且需要配合使用单选按钮&input type=&radio&&。使用伪类checked，通过checked选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将单选按钮放在每个.navI元素里的最上层，然后设置display:none，接下来是&label&表示导航标题，最后是&p&表示导航内容
点击导航标题时，触发checked伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style:}
input{margin: 0;width: 0;}
a{text-decoration:color:}
.box{width: 572border: 1px solid #999;overflow:}
.nav{margin-left: -1font: 14px &微软雅黑&;overflow:background-color: #f1f1f1;}
.navI{float:width: 33.333%;box-sizing: border-}
.navI-tit{display:line-height: 40text-align:cursor:border-left: 1px solid #border-bottom: 1px solid #}
.navI-txt{position:width: 572height:200text-indent:2line-height: 2;background:#}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
/*重点代码*/
.navI-radio{display:}
.navI-radio:checked + .navI-tit{background:#border-bottom:}
.navI-radio:checked ~ .navI-txt{z-index:1;}
&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 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 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&
[缺点]：HTML结构较复杂
【2】使用视觉布局
在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容
点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果
使用伪类hover来实现改变当前导航标题样式的效果
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style:}
a{text-decoration:color:}
input{margin: 0;padding: 0;border:}
.box{width:572border:1px solid #999;font:14px &微软雅黑&;overflow:}
.nav-tit{margin-left: -1height: 40line-height: 40text-align:background-color: #f1f1f1;overflow:}
.nav-titI{box-sizing: border-float:width: 33.333%;border-left: 1px solid #border-bottom: 1px solid #cursor:}
.nav-txt{height: 200}
.nav-txtI{height: 200display:width: 100%;text-indent: 2 line-height: 2;}
/*重点内容*/
.nav-txt{overflow:}
.nav-titI:hover{background-color: #border-bottom:}
&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 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&
[缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
上面的三种方法中，实现效果最好的是使用label标签配合radio类型的input标签，通过:checked选择器来实现
在实际应用中，使用javascript的方式来控制导航条Tab的情况更为普遍
阅读(...) 评论()本文讲的是经典tab选项卡导航菜单，
提示：您可以先修改部分代码再运行
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DT
提示：您可以先修改部分代码再运行
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&漂亮且附带提示的导航菜单&/title&
&meta http-equiv="content-type" content="text/charset=gb2312"&
&!--把下面代码加到&head&与&/head&之间--&
&style type="text/css"&
text-align:
font-size:12
text-align:
margin-top:10
margin-right:
margin-left:
/* 内容模块 */
background-image:url();
background-repeat:repeat-x;
line-height:26
padding-left:10
/* 菜单模块 */
border-bottom:1px solid #000000; /* 菜单模块的底部边框，也就是内容模块的上边框 */
list-style:
padding-top:4
padding-right:5
padding-bottom:3
padding-left:5
display: /* 【重点】让li横向排列 */
font-size:12
.tab li a{
border:1px solid #
/* 菜单项的边框 */
color:#000000;
border-bottom: /* 底部无边框 */
text-decoration:
background:#f7f7f7;
font-size:14
font-weight:
padding-top:3
padding-right:4
padding-bottom:3
padding-left:4
/* 鼠标经过时的样式 */
.tab li a:hover{
background:#
/* 选中时的样式 */
.tab li.no a{
/* 【重点】菜单项里面的连接使用了相对定位 */
/* 【重点】相对于外层顶部为1像素，正好是底部边框的像素，所以就遮住了ul的底部边框 */
color:#ff0000;
font-weight:
background-image:url();
background-repeat:repeat-x;
font-size:14
&script type="text/javascript"&
function tab(a,b,c,d)
for(i=1;i&=b;i++){
// 判断选择模块
document.getElementById(a+"_mo_"+i).style.display = "block";
// 显示模块内容
document.getElementById(a+"_to_"+i).className = "no";
// 改变菜单为选中样式
// 没有选择的模块
document.getElementById(a+"_mo_"+i).style.display = "none"; // 隐藏没有选择的模块
document.getElementById(a+"_to_"+i).className = "q";
// 清空没有选择的菜单样式
&!--把下面代码加到&body&与&/body&之间--&
&div class="page"&
&ul class="tab"&
&li id="tab_to_1" class="no"&&a href="#" onmouseover="tab('tab',9,1)"&首页&/a&&/li&
&li id="tab_to_2"&&a href="#" onmouseover="tab('tab',9,2)"&衬衫&/a&&/li&
&li id="tab_to_3"&&a href="#" onmouseover="tab('tab',9,3)"&茄克&/a&&/li&
&li id="tab_to_4"&&a href="#" onmouseover="tab('tab',9,4)"&正装西装&/a&&/li&
&li id="tab_to_5"&&a href="#" onmouseover="tab('tab',9,5)"&消闲单西&/a&&/li&
&li id="tab_to_6"&&a href="#" onmouseover="tab('tab',9,6)"&裤子&/a&&/li&
&li id="tab_to_7"&&a href="#" onmouseover="tab('tab',9,7)"&外套&/a&&/li&
&li id="tab_to_8"&&a href="#" onmouseover="tab('tab',9,8)"&精品推荐&/a&&/li&
&li id="tab_to_9"&&a href="#" onmouseover="tab('tab',9,9)"&其他&/a&&/li&
&div class="tab_mo"&
&div id="tab_mo_1"&最新更新的内容&/div&
&div id="tab_mo_2" style="display:none"&男士衬衫|高唯便装衬衫|高唯法式衬衫&/div&
&div id="tab_mo_3" style="display:none"&最新下载在这里呀&/div&
&div id="tab_mo_4" style="display:none"&精品网页特效，请点击链接&/div&
&div id="tab_mo_5" style="display:none"&你好，多买多送&/div&
&div id="tab_mo_6" style="display:none"&你好，希望多来&/div&
&div id="tab_mo_7" style="display:none"&你好，下次多来&/div&
&div id="tab_mo_8" style="display:none"&你好，谢谢惠顾&/div&
&div id="tab_mo_9" style="display:none"&你好，欢迎光临&/div&
提示：您可以先修改部分代码再运行
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索导航
bootstrap导航菜单tab、tab导航菜单、经典伸缩导航菜单、tab选项卡、tabcontrol隐藏选项卡，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
开发者常用软件，超百款实用软件一站式提供
云栖社区()为您免费提供相关信息，包括
的信息，还有bootstrap导航菜单tab、tab导航菜单、经典伸缩导航菜单、tab选项卡、tabcontrol隐藏选项卡等
，所有相关内容均不代表云栖社区的意见！此画板关注者(共16人，)
未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口