js实现选项卡

<div id="tabs">
<ul id="lists">
    <li class="abc active">科技</li>
    <li class="abc">汽车</li>
    <li class="abc">体育</li>
</ul>
<div class="hide active">
    苹果秋季发布会：双卡双待来了？</br>
    疑刘强东案女主照曝光 关键证人蹊跷离开美国</br>
    乐视起死回生，孙宏斌用200亿都没能救活，让刘强东马化腾救活了</br>
    被人民日报批评后，移动“真心悔改”：再推8元畅聊套餐！</br>
</div>
<div class="hide">
   吉利“巨无霸”来了！颜值比卡宴帅十倍，价格却比哈弗H6更良心</br>
   考驾照的第一步，色盲测试，如果你只能看到数字6那就考不了驾照</br>
   2019款奥迪A6L到店！长相与概念车无异，售价一算，又十拿九稳了</br>
   又一款被埋没的豪车，曾经49万买不起，如今降至20.68万卖不动</br>
</div>
<div class="hide">
    1米58却破格入选中国男篮，中国库里天赋惊人，已获NBA名教肯定</br>
    拒绝归化！排名世界第1华裔天才，要改回中国籍，背后原因让人动容</br>
    安东尼到底是一身肥肉还是肌肉？对比詹姆斯发现差距确实一目了然</br>
    乔丹和38岁娇妻现状，为她不惜上手术台，结婚5年被彻底征服</br>
</div>

*{
        padding: 0;
        margin: 0;
    }
    #tabs {
        margin-top: 20px;
        margin-left: 50px;
    }
    #tabs ul {
        list-style:none;
        display:block;
        height:30px;
        line-height:30px;
    }
    #tabs ul li {
        list-style:none;
        float:left;
        width:90px;
        height:30px;
        border:1px solid #369;
        text-align:center;
        background-color:#fff;
        cursor:pointer;
    }
    #tabs ul li:nth-child(2){
        border-left:1px solid #fff;
        border-right:1px solid #fff;
    }
    #lists .active {
        border-top:2px solid red;
        border-bottom:2px solid #fff;
    }
    #tabs div {
        width:300px;
        height:110px;
        padding:15px;
        border:1px solid #369;
    }
    #tabs .hide{
        display:none;
    }
    div .active{
        display:block !important;
    }
    
     $('#lists li').click(function () {
    $('#lists li').removeClass('active')
    $(this).addClass('active')
    $('#tabs div').removeClass('active')
    console.log( $('#tabs div').eq($('#list li').index($(this))))
    // $('#tabs div').eq($('#list li').index($(this))).addClass('active')
    $('#tabs div').eq($(this).index()).addClass('active')
})