一個簡單的jquery 選項卡切換

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<style>

.tab{ width:500px; height:100px; border:1px solid #CCC;}
.tab_menu{ width:500px; height:40px;}
.tab_menu li{ height:40px; line-height:40px; font-size:14px; text-align:center; float:left; list-style:none; width:80px;}
.tab_box{ width:500px; height:60px;}
.selected{ background:#666;}


</style>


<div class="tab">
<div class="tab_menu"><li class="selected"><a href="">時事</a></li><li><a href="">體育</a></li><li><a href="">娛樂</li></a></div>


<div class="tab_box">
<div>時事</div>
<div style="display:none">體育</div>
<div style="display:none">娛樂</div>
</div>
</div>


<script>
$(function(){
var $tab_menu=$(".tab_menu>li")
$tab_menu.mousemove(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var nei=$tab_menu.index(this)//獲取當前元素在全部元素中得索引
$(".tab_box>div").eq(nei).show().siblings().hide();
})
})
</script>