实现效果:
css代码
#tabNav{
background: #ebebeb;
width: 2000px;
overflow: hidden;
position: relative;
text-align: center;
}
.tabbox{
overflow: hidden;
}
.tabbox ul{
width: 100%;
list-style:none;
}
.tabbox ul li{
float: left;
line-height: 52px;
border-right: 1px solid #dbdbdb;
font-size: 14px;
color: #000;
cursor: pointer;
width: 120px;
}
.tabbox ul li.active{
background-color:#003f88;
color:white;
font-weight:bold;
}
.tabbox .content{
padding:10px;
margin-top: 0px;
min-height: 100px;
}
.tabbox .content>div{
display:none;
}
.tabbox .content>div.active{
display:block;
}
html代码
<div class="tabbox">
<ul id="tabNav">
<li class="active">学习经历</li>
<li>工作经历</li>
<li>培训经历</li>
<li>资质证书</li>
<li>社会关系</li>
</ul>
<div class="content">
<div class="active">111111</div>
<div>222222</div>
<div>333333</div>
<div>444444</div>
<div>555555</div>
</div>
</div>
js代码
$(function(){
$(".tabbox li").click(function ()
{
//获取点击的元素给其添加样式,讲其兄弟元素的样式移除
$(this).addClass("active").siblings().removeClass("active");
//获取选中元素的下标
var index = $(this).index();
$(this).parent().siblings().children().eq(index).addClass("active")
.siblings().removeClass("active");
});
})