NEWS

网站建设资讯

 *{ 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");
		})
	})
//]]>





	
		

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

浏览器效果：

实例2（导航栏滑过）：

/* 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
			
宣传单
			
画册
			<