一个简单实用jquery tab选项卡，鼠标滑过切换，找了很久这种代码简单的，其他的写得都比较复杂，代码比较多：

HTML代码部分：

<div class="tabbox" id="statetab">
	<ul class="tabbtn">
		<li class="current"><a href="">php900</a></li>
		<li><a href="#">分享一</a></li>
		<li><a href="#">分享二</a></li>
		<li><a href="#">分享三</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon">
		内容一<br />
		<strong>内容一</strong>
		<br />内容一
	</div><!--tabcon end-->
	<div class="tabcon">
		内容二
	</div><!--tabcon end-->
	<div class="tabcon">
		内容三
	</div><!--tabcon end-->
	<div class="tabcon">
		内容四
	</div><!--tabcon end-->
</div><!--tabbox end-->

/* tabbox */
.tabbox{width:488px;margin:20px auto;position:relative;height:328px;overflow:hidden;}
.tabbox .tabbtn{ height:44px; background:url(images/01.png) repeat-x; border-left:solid 1px #ddd; border-right:solid 1px #ddd; padding-left:23px;}
.tabbox ul{ padding-top:8px;}
.tabbox .tabbtn li{float:left;position:relative;margin:0 0 0 -1px;}
.tabbox .tabbtn li a {display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:105px;text-align:center;font-size:12px;cursor:pointer; font-size:14px; color:#4f4f4f;font-weight:bold;}
.tabbox .tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;}
.tabbox .tabbtn li.current a{height:35px;line-height:34px;background:#fff;color:#4f4f4f;font-weight:800;}
.tabbox .tabcon{padding:10px;border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;}

<script type="text/javascript">
//tab plugins 插件
$(function(){
    $('#statetab .tabbtn li').mouseover(function(){
        TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this))
    });
    $('#statetab .tabbtn li').eq(0).trigger("mouseover");
    
    function TabSelect(tab,con,addClass,obj){
        var $_self = obj;
        var $_nav = $(tab);
        $_nav.removeClass(addClass),
        $_self.addClass(addClass);
        var $_index = $_nav.index($_self);
        var $_con = $(con);
        $_con.hide(),
        $_con.eq($_index).show();
    }
});
</script>