这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个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
复制代码 代码如下:
精品文章
视频
照片
麦鸡的博客
精品文章啊!麦鸡的博客欢迎你!
视频啊!麦鸡的博客欢迎你!
你的照片呢?麦鸡的博客欢迎你!
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     dtarray[i].classname = '';//取消class 
    ddarray[i].classname = ''; 
} 
    dtarray[num].classname = 'on'; 
    ddarray[num].classname = 'on';//增加class 
}
演示地址