CSS实现导航条Tab切换的三种方法介绍

.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的情况更为普遍