基于jquery自己写tab滑动门(通用版)

　　.main

　　{

　　height:360px;

　　width:290px;

　　border:1px solid #444444;

　　font-size:12px;

　　color:#444444;

　　margin:20px;

　　}

　　.main_top

　　{

　　height:30px;

　　width:290px;

　　line-height:30px;

　　text-align:left;

　　background-color:#999999;

　　border-bottom:1px solid #444444;

　　}

　　.main_top ul

　　{

　　padding:0px;

　　margin:0px;

　　list-style-type:none;

　　position:absolute;

　　}

　　.main_top ul li.h_qian

　　{

　　float:left;

　　width:80px;

　　text-align:center;

　　background-color:#999999;

　　height:30px;

　　}

　　.main_top ul li.h_hou

　　{

　　float:left;

　　width:80px;

　　text-align:center;

　　background-color:#ffffff;

　　cursor:pointer;

　　margin-top:1px;

　　height:30px;

　　font-weight:bold;

　　}

　　.main_content

　　{

　　margin:10px;

　　}

　　function tabchange(obj,p,c,q,h) {

　　$(obj).parent().find("li").attr("class", ""+q+"");

　　$(obj).parents("."+p+"").find("."+c+"").hide();

　　$(obj).attr("class", ""+h+"");

　　var j = $(obj).index();

　　$(obj).parents("."+p+"").find("."+c+":eq(" + j + ")").show();

　　}

　　<div class="main">

　　<div class="main_top">

　　<ul>

　　<li class="h_hou" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第一模块</li>

　　<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第二模块</li>

　　<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第三模块</li>

　　</ul>

　　</div>

　　<div class="main_content">第1块

　　</div>

　　<div class="main_content" style="display:none;">第2块

　　</div>

　　<div class="main_content" style="display:none;">第3块

　　</div>

　　</div>