使用jquery实现选项卡切换效果

实现效果：

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

参考链接：https://www.cnblogs.com/scc-/p/9507645.html