点击切换的JS

$(function(){
    var tabnav = $("#tab-nav ul li");
    tabnav.click(function(){
        $(this).addClass("hover").siblings().removeClass("hover");
        var index = $("#tab-nav ul li").index(this);
        $("ul.tab-con").eq(index).fadeIn(100).siblings("ul.tab-con").fadeOut(100); 
    });
});    

 

<div id="tab-nav">
<ul>
<li class="hover" data-tabid="4"><i>最新发布</i></li>
<li data-tabid="5"><i>小编推荐</i></li>
<li data-tabid="6"><i>本周热门</i></li>
</ul>
<ul class="pcontent clearfix tab-con" data-tabnum="0">
<li>123</li>
</ul>
<ul class="pcontent clearfix tab-con" data-tabnum="1">
<li>123</li>
</ul>
<ul class="pcontent clearfix tab-con" data-tabnum="2">
<li>123</li>
</ul>
</div>