麥雞的TAB切換功能結合了javascript和css

這類型東西網上多的是,但朋友說我的程式程式理念好(嘻…),我也寫一個tab切換,厚著臉皮把它叫麥雞的TAB切換(汗一把先.),轉載也請註明麥雞的部落格,下面就開始了
做個滑動門,需要一個圖片

CSS

複製代碼 代碼如下:.nav{position:relative}
.nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2}
.nav dt a{color:#555; text-decoration:none}
.nav dt a:hover{color:#000}
.nav dt a{
float:left; display:block; height:24px; line-height:26px; overflow:hidden;
background:url(/upload/20071217200212700.gif) no-repeat 0 -24px
}
.nav dt a span{
display: block; padding:0 15px 0 0; margin:0 0 0 15px;
background:url(/upload/20071217200212700.gif) no-repeat right -24px
}
.nav dt.on a{background-position:0 0}
.nav dt.on a span{background-position:right 0}
.nav dd{
background:#fff; border:solid 1px #ccc; width:400px; margin:0; padding:10px;
position:absolute; left:0; top:23px; z-index:1; visibility:hidden
}
.nav dd.on{visibility:visible}

/*-_-!*/
.nav dd a{display:block}

xhtml

複製代碼 代碼如下:<dl class="nav" id="maiji_tab">

<dt class="on">
<a href="#this" href="#this" onclick="maiji_tab(0)"><span>精品文章</span></a>
</dt>
<dt>
<a href="#this" href="#this" onclick="maiji_tab(1)"><span>視頻</span></a>
</dt>
<dt>
<a href="#this" href="#this" onclick="maiji_tab(2)"><span>照片</span></a>
</dt><dt>
<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”><span>麥雞的部落格</span></a>
</dt>

<dd class=”on”>
<p>精品文章啊!<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麥雞的部落格歡迎你!</a></p>
</dd><dd>
<p>視頻啊!<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麥雞的部落格歡迎你!</a></p>
</dd><dd>
<p>你的照片呢?<a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>麥雞的部落格歡迎你!</a></p>
</dd></dl>

javascript

複製代碼 代碼如下:var maiji_tab = function(num){//根據mun添加class,使它顯示
var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//擷取節點
var ddArray = document.getElementById('maiji_tab').getElementsByTagName("dd");
for (var i = 0; i < ddArray.length; i++){
dtArray[i].className = '';//取消class
ddArray[i].className = '';
}
dtArray[num].className = 'on';
ddArray[num].className = 'on';//增加class
}

示範地址