超好用的简单的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
			宣传单
			画册
			<

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

其他资讯