jquery tab切换



    
        
        jquery tab切换
    
    
    
        
  • 首页
  • 关于我们
  • 服务项目
  • 合作案例
  • 新闻资讯
  • 信息采集
  • 养生堂
  • 首页
  • 公司简介
  • 企业文化
  • 荣誉资质
  • 网站建设
  • 微信开发
  • 电商商务
  • 安卓开发
  • 苹果开发
  • 动画制作
  • 网站建设
  • 微信开发
  • 电商商务
  • 安卓开发
  • 苹果开发
  • 动画制作
  • 公司动态
  • 行业新闻
  • 设计欣赏
  • 资源共享
  • 百家杂谈
  • 开心一刻
  • 美食餐饮
  • 世界之醉
  • 科技之炫
  • 植物之美
  • 世界之美
  • 动物把件
  • 养生保健
  • 心灵鸡汤

效果

image.png
image.png



    
        
        jquery tab栏
        
    
    
        
        

效果图:

image.png

image.png


    
        
        
        
        
        
        深圳市图灵人工智能科技有限公司
        
        
        
        
    
    
        
        
            
            
            
            
            
            
            
            
222

layui/css/topbar.css文件

body,ul{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .topbar{
                width: 100%;
                height: 111px;
                z-index: 999;
                position: fixed;
            }
            .topbar-active{
                background-color: #fff;
            }
            .topbar .topbar-container{
                margin: 0 auto;
                width: 1200px;
                height: 111px;
                overflow: hidden;
            }
            .topbar .topbar-container .logo{
                float: left;
                margin-top:32px;
            }
            .topbar .topbar-container .nav{
                height: 111px;
                width: 910px;
                margin-left: 116px;
                float: left;
            }
            .topbar .topbar-container .nav #nav-list{
                width: 910px;
                height: 50px;
                margin-top: 38px;   
            }
            .topbar .topbar-container .nav #nav-list .nav-item{
                float: left;
                width: 110px;
                height: 100%;
                margin-right: 20px;
            }
            .topbar .topbar-container .nav #nav-list .nav-item>a{
                width: 110px;
                height: 50px;
                text-decoration: none;
                color: #fff;
                display: block;
                text-align: center;
                line-height:50px;
                font-size: 18px;
                cursor: pointer;
            }
            .topbar .topbar-container .nav #nav-list .nav-active>a{
                color: #333;
            }
            .topbar .topbar-container .nav #nav-list .item>a{
                color: #fff;
                background-color: #eb4d17;
            }
            .topbar .nav-content{
                width: 100%;
                height: 80px;
                position: absolute;
                left: 0;
                top: 88px;
                z-index: 999;
                text-align: center;
                background-color: #f3f2f2;
                display: none;
            }
            .topbar .nav-content .nav-content-list{
                max-width: 1200px;
                height: 100%;
                overflow: hidden;
                height: 100%;
                display: inline-block;
            }
            .topbar .nav-content .nav-content-list .nav-content-item{
                float: left;
                width: 120px;
                height: 80px;
            }
            .topbar .nav-content .nav-content-list .nav-content-item>a{
                width: 100%;
                height: 80px;
                display: block;
                text-decoration: none;
                color: #333;
                font-size: 18px;
                line-height: 80px;
            }
            .topbar .nav-content .nav-content-list .active>a{
                color: red;
            }
            .desc-content{
                width: 100%;
                height: 500px;
                background-color: #0000FF;
            }
            

layui/js/nav.js文件

$(function(){
    $(".topbar").hover(function(){
        $(this).addClass("topbar-active");
        $(".nav .nav-item").addClass("nav-active");
    },function(){
        $(this).removeClass("topbar-active");
        $(".nav .nav-item").removeClass("nav-active");
    })
    $(window).scroll(function(){
         var scroHei = $(window).scrollTop();//滚动的高度
         if(scroHei>0){
             $(".topbar").addClass("topbar-active");
             $(".nav .nav-item").addClass("nav-active");
         }else{
             $(".topbar").removeClass("topbar-active");
             $(".nav .nav-item").removeClass("nav-active");
         }
         
    })
    $(".nav .nav-item").hover(function(){
        $(this).addClass("item").siblings().removeClass("item");
        $(this).children(".nav-content").stop().slideDown(600);
        $(".nav-content .nav-content-list").stop().show().siblings().hide();
    },
    function(){
        $(this).children(".nav-content").stop().slideUp(10);
    })
    $(".nav .nav-item .nav-content").hover(function(){
        $(this).stop().slideDown(600);
    },function(){
        $(this).stop().slideUp(10);
    })
    $(".nav .nav-item .nav-content .nav-content-item").hover(function(){
        $(this).addClass("active").siblings().removeClass("active");
    })
})
 

效果

image.png

你可能感兴趣的:(jquery tab切换)