HTML implements simple ul menu switching

Realize the effect

html part

<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 part

#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 code

$(".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);
});