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

復(fù)制代碼代碼如下:

 
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:

復(fù)制代碼代碼如下:

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

代碼很簡單，不多說了，詳細(xì)使用方法請參照Demo中tangtab.js里的注釋。

附：
在線演示：http://demo.jb51.net/js/2012/TabDemo/
打包下載：TabDemo_jb51.rar

您可能感興趣的文章:

相關(guān)文章

jquery與google map api結(jié)合使用控件,監(jiān)聽器
關(guān)于jquery的獲取不再此處累贅，網(wǎng)上有許多關(guān)于jquery的介紹。
2010-03-03
jquery uploadify如何取消已上傳成功文件
這篇文章主要為大家詳細(xì)介紹了jquery uploadify如何取消已上傳成功文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實(shí)現(xiàn)切換皮膚功能,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合cookie動態(tài)變換頁面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2018-03-03
jquery彈窗插件colorbox綁定動態(tài)生成元素的方法
這篇文章主要介紹了jquery彈窗插件colorbox綁定動態(tài)生成元素的方法,colorbox是一款非常好用的彈窗插件,需要的朋友可以參考下
2014-06-06
讓你的博客飄雪花超出屏幕依然看得見
原作者是在body中不停的插入多個小div雪花來向下慢慢飄，一直飄到body的底部后，將雪花移除,于是，將原來的代碼稍加修改，讓他只是從屏幕的頂部飄落到屏幕底部（不是body的底部）后，就將雪花移除，另外將雪花改為fixed定位
2013-01-01
jQuery實(shí)現(xiàn)簡易QQ聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡易QQ聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
解決qrcode.js生成二維碼時必須定義一個空div的問題
這篇文章主要介紹了解決qrcode.js生成二維碼時必須定義一個空div的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼
下面小編就為大家?guī)硪黄胘Query實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
詳解JQuery基礎(chǔ)動畫操作
這篇文章主要介紹了JQuery基礎(chǔ)動畫操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
jQuery插件jquery.kxbdmarquee.js實(shí)現(xiàn)無縫滾動效果
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02