css:

复制代码 代码如下:

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

}

js:

复制代码 代码如下:

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();

}

html:

复制代码 代码如下:

<div>

<div>

<ul>

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

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

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

</ul>

</div>

<div>第1块

</div>

<div>第2块

</div>

<div>第3块

</div>

</div>

代码很简单，不多说了，详细使用方法请参照Demo中tangtab.js里的注释。

附：

在线演示：http://demo.jb51.net/js/2012/TabDemo/

打包下载：TabDemo_jb51.rar