jq选项卡的实现原理

<style>
	.none{display:none;}
	.tab_menu{width:300px;height:30px;border:1px solid red;}
	.div{width:60px;height:30px;float:left;margin-right:10px;cursor:pointer;background:lightgreen;line-height:30px;}
	.tab_box , .tab_box>div{width:300px;height:300px;border:1px solid lightblue;}
	.sel{background:red;}
</style>
<div>
	<div class="tab_menu">
		<div class="div">菜单一</div>
		<div class="div">菜单二</div>
		<div class="div">菜单三</div>
	</div>
	<div class="tab_box">
		<div>111111111111111111111111</div>
		<div class="none">222222222222222222222222</div>
		<div class="none">333333333333333333333333</div>
	</div>
</div>
<script>
$('.tab_menu').children().mouseover(function(){
	$(this).addClass('sel').siblings().removeClass('sel');	//改变颜色
	var id = $(this).index();	//当前操作的元素索引值
	$('.tab_box').children().eq(id).show().siblings().hide();	//当前显示，其他的隐藏。
});
</script>