Jquery tabl選項卡

做網頁的過程中，經常需要用到選項卡。

HTML代碼：

 1 <div class="new_con">
 2         <div class="newtel">
 3             <ul class="new_telst">
 4                 <li class="">最新頭條</li>
 5                 <li class="newon">硬件發燒友</li>
 6                 <li class="">科學探索</li>
 7                 <p style="left: 166px;">
 8                 </p>
 9             </ul>
10             <div class="clear">
11             </div>
12         </div>
13         <div class="new-wrap">
14             <!--案例1-->
15             <div class="new_lst show" style="display: none;">
16                 111
17             </div>
18             <!--案例2-->
19             <div class="new_lst" style="display: block;">
20                 222
21             </div>
22             <!--案例3-->
23             <div class="new_lst" style="display: none;">
24                 333
25             </div>
26         </div>
27     </div>

js代碼部分：

<script type="text/javascript">           
$(document).ready(function(){
    //設計案例切換
    $('.new_telst li').mouseover(function(){
        var liindex = $('.new_telst li').index(this);
        $(this).addClass('newon').siblings().removeClass('newon');
        $('.new-wrap div.new_lst').eq(liindex).fadeIn(150).siblings('div.new_lst').hide();
        var liWidth = $('.new_telst li').width();
        $('.newtel .new_telst p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
    });
    
});
</script>