一个大的div盒子表示tab选项卡整体，里面嵌套上下两个盒子，上面的盒子是选项卡的导航区，下面的盒子是选项卡的内容区，导航中有几个子项，内容区的盒子就对应有几个；
<div class="tab">
<!-- 选项卡的导航 S -->
<ul class="tab_nav">
<li>体育新闻</li>
<li class="cur">教育新闻</li>
<li>热点新闻</li>
</ul>
<!-- 选项卡的导航 E -->
<!-- 选项卡内容 -->
<div class="tab_box">
<div class="item">体育新闻内容</div>
<div class="item" style="display: block;">教育新闻内容</div>
<div class="item">热点新闻内容</div>
</div>
</div>
Css
内容区域的盒子一般我们都要隐藏，然后在html结构中谁显示给谁用行内样式设置显示即可；
<style>
.tab {
width: 300px;
height: 345px;
margin: 50px auto;
border: 2px solid #f00;
}
.tab_nav {
height: 45px;
}
.tab_nav li {
float: left;
width: 100px;
height: 45px;
background-color: #ccc;
text-align: center;
line-height: 45px;
cursor: pointer;
}
.tab_nav .cur {
background-color: #f00;
color: #fff;
}
.tab_box .item {
display: none;
height: 300px;
background-color: #f00;
}
</style>