Jquery tabl选项卡

做网页的过程中，经常需要用到选项卡。

HTML代码：

<div class="new_con">
        <div class="newtel">
            <ul class="new_telst">
                <li class="">最新头条</li>
                <li class="newon">硬件发烧友</li>
                <li class="">科学探索</li>
                <p style="left: 166px;">
                </p>
            </ul>
            <div class="clear">
            </div>
        </div>
        <div class="new-wrap">
            <!--案例1-->
            <div class="new_lst show" style="display: none;">
                111
            </div>
            <!--案例2-->
            <div class="new_lst" style="display: block;">
                222
            </div>
            <!--案例3-->
            <div class="new_lst" style="display: none;">
                333
            </div>
        </div>
    </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>