麦鸡的TAB切换功能结合了javascript和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

复制代码 代码如下:

精品文章

精品文章啊!麦鸡的博客欢迎你!

复制代码 代码如下:
varmaiji_tab=function(num){//根据mun添加class,使它显示
vardtArray=document.getElementById('maiji_tab').getElementsByTagName("dt");//获取节点
varddArray=document.getElementById('maiji_tab').getElementsByTagName("dd");
for(vari=0;idtArray[i].className='';//取消class
ddArray[i].className='';
}
dtArray[num].className='on';
ddArray[num].className='on';//增加class
}

演示地址