选项卡tab实现二 _Web前端

选项卡tab实现2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<style>	
	:hover{} /*for ie7*/
	html,body,ul,li{
		margin:0;
		padding:0px;
	}
	ul,li{
		list-style:none;
	}
	#wrap{
		margin:10px;		
		width:500px;		
		border:1px solid rgb(108, 146, 173);
	}
	#wrap .tab{
		height:29px;
		background-color:rgb(234, 240, 253);
	}
	#wrap .tab li{
		float:left;		
	}
	#wrap .tab li a{
		display:inline-block;
		font-weight:bold;
		color:rgb(0, 85, 144);
		height:30px;
		line-height:30px;
		padding:0px 20px;
		border-right:1px solid rgb(108, 146, 173);
		cursor:pointer;
	}	
	#wrap .tab li a:hover{
		background-color:orange;
	}
	#wrap .tab li a.selected{
		background-color:white;
	}
	#wrap .content{
		padding:10px;	
		border-top:1px solid rgb(108, 146, 173);	
	}
	#wrap .content > div{
		height:200px;
		display:none;
	}
	#wrap .content > div.selected{
		display:block;
	}
</style>
<script>
	$(function(){
		$('#wrap').delegate('.tab li','click',function(){
			var $self=$(this);
			//设置tab
			$self.siblings().find('a').removeClass('selected');
			$self.find('a').addClass('selected');
			//设置content
			var $contents=$('#wrap .content > div');
			$contents.removeClass('selected');
			$contents.eq($self.index()).addClass('selected');
		});
	});
</script>
</head>
<body>

	<div id="wrap">
		<ul class="tab">
			<li><a class="selected">tab1</a></li>
			<li><a>tab2</a></li>
			<li><a>tab3</a></li>
			<li><a>tab4</a></li>
		</ul>
		<div class="content">
			<div class="selected">content1</div>
			<div>content2</div>
			<div>content3</div>
			<div>content4</div>
		</div>		
	</div>
	
</body>
</html>