重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

超好用的简单的jquerytab选项卡切换代码(点击切换和导航栏滑过)

实例1(点击切换):

10年积累的成都网站设计、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有源城免费网站建设让你可以放心的选择与我们合作。







 *{ margin:0; padding:0;}
 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:240px;margin:50px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_menu li.selected { color:#FFF; background:#6D84B4;}
 .tab_box { clear:both; border:1px solid #898989; height:100px;}
 .hide{display:none}


 

//元素高亮
				   .siblings().removeClass("selected");  //去掉其它同辈
  • 元素的高亮             var index =  $div_li.index(this);  // 获取当前点击的
  • 元素 在 全部li元素中的索引。 $("div.tab_box > div")    //选取子节点。不选取子节点的话,会引起错误。如果里面还有div  .eq(index).show()   //显示 
  • 元素对应的
    元素 .siblings().hide(); //隐藏其它几个同辈的
    元素 }).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) }) //]]>
      时事
    • 体育
    • 娱乐
       
    时事
     体育
     娱乐
  • 浏览器效果:

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

    实例2(导航栏滑过):

    
    
    
    
    鼠标滑过jQuery选项卡切换
    
    
    /* case */
    .case{width:960px;margin:100px auto;background:#fff;padding:15px;box-shadow:0 0 10px #ccc;}
    .case .title{height:20px;border-bottom:3px solid #e7e7e7;padding-bottom:10px;}
    .case .title h3{font-size:20px;font-family:"microsoft yahei";}
    .case .title-list{position:relative;top:6px;}
    .case .title-list li{width:146px;line-height:20px;text-align:center;float:left;display:inline;cursor:pointer}
    .case .title-list li.on{color:#ff6600;font-weight:bold;}
    .case .title-list span{position:absolute;top:24px;left:0px;width:146px;height:7px;border-top:3px solid #ff6600;overflow:hidden;text-align:center;}
    
    .product{position:relative;display:none;margin-top:20px; height:auto}
    .product ul{}
    .product-wrap .show{display:block;}
    
    //
    $(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
    			
  • 宣传单
  • 画册
  • <  站长素材网站logo... 

    行业类别:艺术摄影,文化体育

  •   深圳达文影视传媒有限公司logo... 

    行业类别:艺术摄影,文化体育

  •   深圳达文影视传媒有限公司logo... 

    行业类别:艺术摄影,文化体育

  •   深圳达文影视传媒有限公司logo... 

    行业类别:艺术摄影,文化体育

  • 2 3

    浏览器效果:

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


    分享题目:超好用的简单的jquerytab选项卡切换代码(点击切换和导航栏滑过)
    分享链接:http://cqcxhl.cn/article/gcgssh.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP