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>

 

posted @ 2020-03-12 11:51  moppet蔡蔡  阅读(151)  评论(0)  编辑  收藏  举报