选项卡

html

<div class="load">
    <div class="jiao">
        <span>劳动力</span>
        <i class="titleR"></i>
    </div>
    <div class="load_one">
        <div class="tabChange">
            <ul class="tab" id="tab4">
                <li>能源消费总量</li>
                <li>能源消费结构</li>
                <li>电气化</li>
                <li>能源消费强度</li>
                <li>Co2排放</li>
            </ul>
        </div>
        <div class="tabCon" id="tabCon4">
            <div class="tabChart">1</div>
            <div class="tabChart">2</div>
            <div class="tabChart">3</div>
            <div class="tabChart">4</div>
            <div class="tabChart">5</div>
        </div>
    </div>
</div>
css 

.load_one .tabChange{
    height: 30px;
    position: relative;
    width: 100%;
}
.load_one .tabChange ul {
    height: 100%;
    width: auto;
    margin: 0 auto;
    text-align: center;
    padding: 0 4px;
    list-style: none;
}

.load_one .tabChange ul li {
    float: left;
    height: 23px;
    margin-top: 2px;
    padding: 2px 8px;
    color: #fff;
    cursor: pointer;
    width: auto;
}
.load_one .tabCon {
    margin: 0;
    width: 100%;
    background-color: red;
}

.load_one .tabChart {
    padding: 0 0 10px 0;
    position: relative;
}
.tabli {
    background: #04ffe7;
    color: #008288 !important
}

js

$(function(){
    var $commonBodyL = $('.load_one');
    $commonBodyL.each(function(i){
        var $lis= $(this).find('.tab li');
        var $tabCons =$(this).find('.tabCon .tabChart');
        $lis.each(function(j) {
            $(this).click(function() {
                $($tabCons[j]).css('display', "block").siblings().css('display','none');
                $(this).attr("class", "tabli").siblings().attr('class','');
            });
        });
        $lis.first().click();
    })
})