hover to toggle the tab

by Lien Z

HTML

<div>
    <ul id="tabs">
        <li class="current">标签一</li>
        <li>标签二</li>
        <li>标签三</li>
    </ul>
    <div id="con">
        <div>区域一</div>
        <div>区域二</div>
        <div>区域三</div>
    </div>
</div>

CSS

*{padding:0; margin:0; list-style-type:none;}
div div{width:208px; height:200px; background:#ffffff; text-align:center; border:1px solid #0000ff; line-height:200px;}
#tabs{width:510px; height:22px;}
#tabs li{width:68px; height:20px; border:1px solid #999999; float:left; display:inline; background:#ffff00; cursor:pointer; text-align:center; line-height:20px; font-size:12px;}
#tabs li.current{background:#ff5800; border:1px solid #333333; font-weight:bold; color:#ffffff;}

JavaScript

function hTab(tab_controler,tab_con){
    this.tab_controler = tab_controler;
    this.tab_con = tab_con;
    var tabs = $(tab_controler).children("li");
    var panels = $(tab_con).children("div");
    $(tab_con).children("div").css("display","none");
    $(tab_con).children("div:first").css("display","block");
    $(tabs).hover(function(){
        var index = $.inArray(this,tabs);
        tabs.removeClass("current").eq(index).addClass("current");
        panels.css("display","none").eq(index).css("display","block");
    });
};
hTab('#tabs','#con');