使用伪类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，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式
