动态生成的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");
})
});