热门IT资讯网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 网络技术 >

超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）

发表于：2024-11-24 作者：热门IT资讯网编辑
编辑最后更新 2024年11月24日，实例1（点击切换）：

实例1（点击切换）：

 
        
                
                            
  • 时事
    •                         
  • 体育
    •                         
  • 娱乐
    •                 
        
        
                  
时事
                 
体育
                 
娱乐

浏览器效果：

实例2（导航栏滑过）：

鼠标滑过jQuery选项卡切换//$(function(){                              //设计案例切换        $('.title-list li').click(function(){                var liindex = $('.title-list li').index(this);                $(this).addClass('on').siblings().removeClass('on');                $('.product-wrap div.product').eq(liindex).fadeIn(10).siblings('div.product').hide();                var liWidth = $('.title-list li').width();                $('.case .title-list span').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);        });        });//]]>
        
                        
                            
  • LOGO
    •                         
  • 宣传单
    •                         
  • 画册
    •                         <                
        
                
                                
                                        
                                                
                2                
                                                
                        3

浏览器效果：

很赞哦！

相关文章

0