<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><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>
<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>
</div>
[缺点]：HTML结构较复杂【2】使用视觉布局
在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容
点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果
使用伪类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;}
