點擊切換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>