實(shí)現(xiàn)的效果圖：

鼠標(biāo)經(jīng)過選項(xiàng)卡，彈出相對(duì)應(yīng)的內(nèi)容，選項(xiàng)卡個(gè)數(shù)不限；
1.html

?

<div class="box" id="box">
<dl>
<dt class="on"><a href="#">六一兒童節(jié)快樂</a></dt>
<dt><a href="#">快樂</a></dt>
</dl>
<div>
<ul style="display:block;">
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">哮喘</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
</ul>
<ul>
<li><a href="#">兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">兒童節(jié)快樂 </a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
</ul>
</div>
<dl>
<dt>兒童節(jié)快樂</dt>
<dt>兒童節(jié)快樂</dt>
</dl>
<div>
<ul>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
</ul>
<ul>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
<li><a href="#">六一兒童節(jié)快樂</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>

2.css

body{background-color:#fff;}
.box{width:318px; border:#C5D7A5 1px solid; padding-bottom:20px;}
.box div{padding:0 8px;}
.box a{color:#333; font-size:12px; text-decoration:none;}
.box a:hover{text-decoration:underline;}
.box ul,.box dl{margin:0; padding:0; line-height:25px; clear:both;}
.box dt{width:141px; height:25px; line-height:25px;text-align:center;border:#EBEAEB 1px solid;
margin:0 8px;font-size:12px;float:left;display:inline; position:relative;bottom:-1px;
margin-top:5px;cursor:pointer;}
.box ul{border:#DCECC0 1px solid; float:left;padding:5px 0 5px 10px;display:none;}
.box ul li{list-style:none;float:left;width:135px;padding-left:10px;}
.box dt.on{border:#DCECC0 1px solid;border-bottom:#FFF 1px solid;height:30px;font-weight:bold;}

css定位應(yīng)該注意到地方：

1.? .box dt 需要給其加float：left；才能使dt標(biāo)簽位于一行當(dāng)中，這里需要給其加上display：inline；才能保證ie6.0下顯示正常；
2.? dt標(biāo)簽卡跟下面的內(nèi)容框是有間隙的，但當(dāng)前選項(xiàng)卡應(yīng)該跟其內(nèi)容框融為一體，讓用戶更容易捕捉信息內(nèi)容，需要讓上面的標(biāo)簽卡往下移動(dòng)1像素,?這用到了相對(duì)定位position:relative;bottom:-1px;
3. 當(dāng)前選項(xiàng)卡加類 dt.on? 改變其下邊框的顏色border-bottom:#FFF 1px solid;下邊框顏色值根據(jù)設(shè)計(jì)需求來定，因?yàn)楸尘吧前咨?#xff0c;所以這里也使用白色，目的是讓選項(xiàng)卡跟其對(duì)應(yīng)的內(nèi)容框融為一體；

4.給類dt.on 加一個(gè)高度 height：30px；當(dāng)前選項(xiàng)卡會(huì)將內(nèi)容框壓下去，內(nèi)容框便跟相鄰的非當(dāng)前選項(xiàng)卡出現(xiàn)30-25=5個(gè)像素的間距，基本達(dá)到了設(shè)計(jì)要求；

5.這里有個(gè)很奇怪地方，直接給ul 加display：none； 頁面顯示就會(huì)出現(xiàn)明顯的錯(cuò)誤，或者說display：none根本沒在ul上實(shí)現(xiàn)隱藏的作用；解決辦法是給ul加浮動(dòng)float：left；這是定位的關(guān)鍵之一；

?

3.js代碼

?

var box=document.getElementById("box");
function tab(){
var dllist=box.getElementsByTagName("dl")
for(i=0;i<dllist.length;i++){
var dtlist=dllist[i].getElementsByTagName("dt");
//alert(dtlist.length)
for(j=0;j<dtlist.length; j++){(//***//
function(n)
{
// dtlist[j].className="";
dtlist[j].onmouseover=function(){
//var parentdt=this.parentNode
var con_div=get_nextSibling(this.parentNode)
//alert(con_div.nodeName);
var ullist=con_div.getElementsByTagName("ul");
//alert(ullist.length);
//alert(n) 彈出元素在其元素列表或數(shù)組中所處的位置編號(hào)或下標(biāo)號(hào)，據(jù)此來判斷選項(xiàng)卡對(duì)應(yīng)的信息內(nèi)容塊；
allbox();
this.className="on";
ullist[n].style.display="block"
}
}
)(j);
}
}function allbox(){
var allul=box.getElementsByTagName("ul")
var dtlist=box.getElementsByTagName("dt")
for(x=0,y=0;x<allul.length,y<dtlist.length;x++,y++)
{allul[x].style.display="none";dtlist[y].className="";}
}//這里有兩個(gè)for循環(huán)，變量，表達(dá)式，條件，要一一對(duì)應(yīng)好
}//獲取下一個(gè)節(jié)點(diǎn)；
function get_nextSibling(n){
var x=n.nextSibling;
while (x.nodeType!=1){
x=x.nextSibling;
}
return x;
}//加載函數(shù)tab，window.attachEvent 只有IE可以識(shí)別，以此來判斷IE和非IE瀏覽器，因?yàn)閮烧呓壎ㄊ录姆椒ㄓ兴煌?#xff1b;
if (window.attachEvent){window.attachEvent("onload", tab);//IE下加載}
else{window.addEventListener("load",tab,true);//非IE下綁定事件}

?

轉(zhuǎn)載于:https://www.cnblogs.com/fengfan/archive/2010/06/01/1748889.html

總結(jié)

以上是生活随笔為你收集整理的[分享]多个选项卡切换效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。