2009.12.28——一个jquery的选项卡

2009.12.28——一个jquery的选项卡
先看html代码
<

body>
<div class="tab">
	<div class="tab_menu">
		<ul>
			<li class="selected"><span>xhtml</span></li>
			<li><span>css</span></li>
			<li><span>javascript</span></li>
		</ul>
	</div>
	<div class="tab_box">
		<div>xhtml</div>
		<div>css</div>
		<div>javascript</div>
	</div>
</div>

</body>

jquery代码

<script type="text/javascript">
$(function(){
	var tab_menu_li = $('.tab_menu li');
	$('.tab_box div:gt(0)').hide();

	tab_menu_li.mouseover(function(){
		$(this).addClass('selected')
			   .siblings().removeClass('selected');

		var index = tab_menu_li.index(this);//用于同步
		$('.tab_box div').eq(index).show()
						 .siblings().hide();
	}).hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});
});
</script>

css代码

.selected{ background:#fc0;}
.hover{ background:#f60; color:white;}

不做过多说明了 看一下应该就懂了