Biegral Blog

CSS代码：

#tabs{
	width:600px;
	height:250px;
	background:white;
	margin:20px;
}
#tabs ul{
	float:left;  
	margin:20px 0 0 20px;  
	padding:0; 
}
#tabs li{  
	width:80px;  
	height:40px;  
	line-height:40px;  
	display:inline-block;  
	text-align:center;  
	border-bottom:1px solid grey;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background:#eeeeee;
	position:relative; 
	top:1px;
}  
#tabs li:hover{
	color:#aaaaaa;
	cursor:pointer;
}
.items{
	width:560px;  
	height:175px;  
	font-size:16px;   
	text-align:center;  
	border:1px solid grey;  
	float:left;
	margin-left:20px;  
}

jQuery代码：

$(document).ready(function(){
	$("li").bind("click",function(){
		$(".items").hide();
		$("#"+$(this).attr("name")).show();
		$("li").css({
			"border-top":"1px solid white",
			"border-left":"1px solid white",
			"border-right":"1px solid white",
			"border-bottom":"1px solid grey",
			"background":"#eeeeee"
		});
		$(this).css({
			"border-top":"1px solid grey",
			"border-left":"1px solid grey",
			"border-right":"1px solid grey",
			"border-bottom":"1px solid white",
			"background":"white"
		});
	});
	$("li:first-child").click();
});