前面的話
<p> 導航條Tab在頁面中非常常見，本文說詳細介紹CSS實現導航條Tab的三種方法
<p>
佈局
<p>
<p> 根據上圖所示，先規定幾個定義，上圖的模組整體叫做導航，由導航標題和導航內容組成。要實現上圖所示的佈局效果，有兩種佈局方法：語義佈局和視覺佈局
<p>【語義佈局】
<p> 從語義佈局的角度來看，每一個導航標題和其對應的導航內容應該是一個整體
<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>【視覺佈局】
<p> 從視覺佈局的角度來看，所有導航標題為一組，所有導航內容為一組
<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> 導航條的功能就是點選導航標題時，顯示對應的導航內容。如果使用偽類hover實現類似效果，使用第一種佈局方式語義佈局比較合適
<p> 由於在語義佈局中，三個導航內容是處於重疊的狀態。移入其父元素
.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>
<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> [缺點]：初始狀態時，第一個導航標題無法實現預設被選取的狀態(背景白色，無底線)；滑鼠移出導航模組時，導航內容部分無法固定，顯示第一個導航內容；滑鼠移出導航模組時，導航標題的樣式無法固定，恢復到預設狀態
<p>
錨點
<p> 實現導航條的關鍵就在於如何建立導航標題與導航內容之間的聯繫，而錨點就可以實現類似效果。透過點擊錨點，頁面產生一個哈希值，然後跳到對應內容的位置
<p> 使用錨點技術時，使用語義佈局和視覺佈局都可以實現
<p>【1】使用語意佈局
<p> 使用語意佈局時，可以使用偽類
target，透過
target選擇器來改變點擊導覽標題時，目前標題的樣式。不僅如此，因為要使用兄弟選擇器，所以需要改變HTML結構，將導航標題的HTML結構移到導航內容的下面
<p> 點擊導航標題時，觸發
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>
<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>登入後複製
<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;}
.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> [缺點]：初始態預設選取的導航標題樣式無法設定；錨點技術本身的限制是錨點目標會盡可能的到達可視區域上方，從而可能會產生頁面跳動；hover態與點擊態分開，可能會讓人犯暈；滑鼠移出導航模組時，導航標題的樣式無法固定，恢復到預設狀態
<p>
label
<p> 上面使用錨點技術來聯繫導航標題和導航內容，而
label也可以實現類似的效果。
label元素為
input元素定義標註，建立文字標籤與表單控制項的關聯。在
label元素內點擊文字會觸發此控件，選擇該文字時瀏覽器會自動把焦點轉到和標籤相關的表單控件上
<p> 使用
label時，使用語義佈局和視覺佈局都可以實現
<p>【1】使用語義佈局
<p> 使用語義佈局時，使用
label標籤來顯示導航標題，且需要搭配使用單選按鈕
<input type="radio">。使用偽類
checked，透過
checked選擇器來改變點擊導覽標題時，目前標題的樣式。不僅如此，因為要使用兄弟選擇器，所以需要改變HTML結構，將單選按鈕放在每個
.navI元素裡的最上層，然後設定
display:none，接下來是
<label>表示導航標題，最後是
<p>表示導航內容
<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中文网！
