효과
html 부분 실현
<div class="tabbox">
<ul id="tabNav">
<li class="active">基础信息</li>
<li>学习经历</li>
<li>工作经历</li>
<li>培训经历</li>
<li>资质证书</li>
<li>社会关系</li>
</ul>
<div class="content">
<div id="jsjc" class="active"></div>
<div id="xxjl"></div>
<div id="gzjl"></div>
<div id="pxjl"></div>
<div id="zzzs"></div>
<div id="shgx"></div>
</div>
</div>
CSS 부분
#tabNav{
background: #ebebeb;
width: 100%;
overflow: hidden;
position: relative;
text-align: center;
margin-bottom: 0px;
}
.tabbox{
overflow: hidden;
font-size: 0px;/* li数量大于ul宽度浮动换行时存在错位,这个用来消除看不见的间隔 */
}
.tabbox ul{
list-style:none;
font-size;
}
.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;
}
js 코드
$(".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");
//获取选中的标题
var tabName = $(this).text();
console.log(tabName);
});