 
<div> 
<div id="tab"> 
<h2>標(biāo)題一</h2> 
<h2>標(biāo)題二</h2> 
<h2>標(biāo)題三</h2> 
<h2>標(biāo)題四</h2> 
div> 
<dl id="tabcon"> 
<dd>內(nèi)容一</dd> 
<dd>內(nèi)容二</dd> 
<dd>內(nèi)容三</dd> 
<dd>內(nèi)容四</dd> 
</dl> 
<div> 

2 .js部分

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

 
<script type="text/javascript" defer="defer"> 
var tab = document.getElementById("tab").getElementsByTagName("h2"); 
function swap(n) { 
return function() { 
for(var i=0; i<tab.length; i++) { 
document.getElementById("tabcon" + i).style.display = "none"; 
document.getElementById("tab" + i).className = ""; 
} 
document.getElementById("tabcon" + n).style.display = "block"; 
document.getElementById("tab" + n).className = "focus"; 
} 
} 

for(var i=0; i<tab.length; i++) { 
tab[i].setAttribute("id", "tab" + i); 
if(window.addEventListener) { 
tab[i].addEventListener("mouseover", swap(i), false); 
} else if(window.attachEvent) { 
tab[i].attachEvent("onmouseover", swap(i)); 
} 
} 

var tabcon = document.getElementById("tabcon").getElementsByTagName("dd"); 
for(i=0; i<tabcon.length; i++) { 
tabcon[i].setAttribute("id", "tabcon" + i); 
} 

if(document.createEvent) { 
var evObj = document.createEvent('MouseEvents'); 
evObj.initEvent( 'mouseover', true, false); 
tab[0].dispatchEvent(evObj); 
} else if( document.createEventObject) { 
tab[0].fireEvent('onmouseover'); 
} 
</script> 

您可能感興趣的文章:

相關(guān)文章

淺談js中子頁面父頁面方法變量相互調(diào)用
下面小編就為大家?guī)硪黄獪\談js中子頁面父頁面方法變量相互調(diào)用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02
js form表單input框限制20個(gè)字符，10個(gè)漢字代碼實(shí)例
這篇文章主要介紹了js form表單input框限制20個(gè)字符，10個(gè)漢字，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JS自定義打印及靜默打印的實(shí)現(xiàn)方法
在瀏覽器上打印應(yīng)該一個(gè)比較常見的操作, 最簡單的打印方式就是直接點(diǎn)擊瀏覽器右上角,找到“打印”按鈕或者調(diào)用window.print(), 然而,實(shí)際情況下大多數(shù)需求都不會如此簡單,所以本文給大家介紹了使用JS自定義打印及靜默打印的方法實(shí)現(xiàn),需要的朋友可以參考下
2024-01-01
引入JavaScript時(shí)alert彈出框顯示中文亂碼問題
今天在HTML中引入JavaScript文件運(yùn)行時(shí)，alert彈出的提示框中文顯示為亂碼，怎么解決此問題呢？下面小編給大家?guī)砹艘隞avaScript時(shí)alert彈出框顯示中文亂碼問題的解決方法，一起看看吧
2017-09-09
JS仿Windows開機(jī)啟動Loading進(jìn)度條的方法
這篇文章主要介紹了JS仿Windows開機(jī)啟動Loading進(jìn)度條的方法,實(shí)例分析了javascript操作html元素及對應(yīng)樣式實(shí)現(xiàn)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
手機(jī)軟鍵盤彈出時(shí)影響布局的解決方法
這篇文章主要介紹了手機(jī)軟鍵盤彈出時(shí)影響布局的解決方法的相關(guān)資料,大家開發(fā)移動端的軟件時(shí)候，肯定會因?yàn)檐涙I盤的彈窗影響布局，這里說下如何解決，需要的朋友可以參考下
2016-12-12
js中window.open()的所有參數(shù)詳細(xì)解析
本篇文章主要是對js中window.open()的所有參數(shù)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
javascript實(shí)現(xiàn)頁面滾屏效果
本文主要介紹了javascript實(shí)現(xiàn)頁面滾屏效果的方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
基于JS實(shí)現(xiàn)移動端左滑刪除功能
最近做個(gè)項(xiàng)目，需要實(shí)現(xiàn)移動端左滑刪除功能，當(dāng)時(shí)js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化，下面通過本文給大家分享基于JS實(shí)現(xiàn)移動端左滑刪除功能，感興趣的朋友一起看看
2017-07-07