这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了

做个滑动门,需要一个图片

CSS

复制代码 代码如下:

.nav{position:relative}

.navdt{float:left;margin:02px00;position:relative;z-index:2}

.navdta{color:#555;text-decoration:none}

.navdta:hover{color:#000}

.navdta{

float:left;display:block;height:24px;line-height:26px;overflow:hidden;

background:url(/upload/20071217200212700.gif)no-repeat0-24px

}

.navdtaspan{

display:block;padding:015px00;margin:00015px;

background:url(/upload/20071217200212700.gif)no-repeatright-24px

}

.navdt.ona{background-position:00}

.navdt.onaspan{background-position:right0}

.navdd{

background:#fff;border:solid1px#ccc;width:400px;margin:0;padding:10px;

position:absolute;left:0;top:23px;z-index:1;visibility:hidden

}

.navdd.on{visibility:visible}

/*-_-!*/

.navdda{display:block}

xhtml

复制代码 代码如下:

<dlclass="nav"id="maiji_tab">

<dtclass="on">

<ahref="#this"href="#this"onclick="maiji_tab(0)"><span>精品文章</span></a>

</dt>

<dt>

<ahref="#this"href="#this"onclick="maiji_tab(1)"><span>视频</span></a>

</dt>

<dt>

<ahref="#this"href="#this"onclick="maiji_tab(2)"><span>照片</span></a>

</dt><dt>

<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”><span>麦鸡的博客</span></a>

</dt>

<ddclass=”on”>

<p>精品文章啊!<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”>麦鸡的博客欢迎你!</a></p>

</dd><dd>

<p>视频啊!<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”>麦鸡的博客欢迎你!</a></p>

</dd><dd>

<p>你的照片呢?<ahref=”http://www.wler.cn/blog”href=”http://www.wler.cn/blog”target=”_blank”>麦鸡的博客欢迎你!</a></p>

</dd></dl>

javascript

复制代码 代码如下:

varmaiji_tab=function(num){//根据mun添加class,使它显示

vardtArray=document.getElementById('maiji_tab').getElementsByTagName("dt");//获取节点

varddArray=document.getElementById('maiji_tab').getElementsByTagName("dd");

for(vari=0;i<ddArray.length;i++){

dtArray[i].className='';//取消class

ddArray[i].className='';

}

dtArray[num].className='on';

ddArray[num].className='on';//增加class

}

演示地址