动态生成的tab选项卡功能

<style>
    *{margin: 0;padding: 0;}
    .wrap{width: 300px;height: 250px;border:1px solid green;margin: 50px auto;}
    ul{list-style: none; height:40px;border-bottom: 1px solid red;}
    li{width: 100px; box-sizing: border-box;float: left;line-height: 40px;text-align: center;font-weight: bold;}
    .container{box-sizing: border-box;padding: 10px;}
    .active{color: red;background-color: yellow;}
    .con{display: none;}
    .show{display: block;}
</style>

<div>
    <ul>
        <li>社会新闻</li>
        <li>体育世界</li>
        <li>娱乐圈</li>
    </ul>
    <div class="container">
        <div class="con show">
            <p>社会新闻设置</p>
        </div>
        <div class="con show">
            <p>社会新闻设置</p>
        </div>
        <div class="con show">
            <p>社会新闻设置</p>
        </div>
    </div>
</div>

$(function(){
        $(".li").click(function(){
            var index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".con").eq(index).addClass("show").siblings().removeClass("show");
        })
    });