2009.12.28-jqueryのタブ

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>

<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>

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