jqueryTAB切换

　2012-05-28 20:13:04　来源：WEB开发网　　　

核心提示：<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></scri

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('div').each(function(i) {
		$('div').eq(0).show().nextAll().hide();
        });
	$('span').click(function(){
		$(this).addClass('checked').siblings().removeClass();
		$("div").hide().eq($('span').index(this)).show().nextAll().css("display","none");
		});
	});
</script>
</head>
<style type="text/css">
	.checked { background:red}
	.one,.two,.three { width:50px;height:22px;line-height:20px;border:1px red solid}
	
</style>
<body>
<span class="one">one</span><span class="two">two</span><span class="three">three</span>
<div class="">Hello</div>
<div class="">World</div>
<div class="">jquery</div>
</body>
</html>