麦鸡的TAB切换功能结合了javascript和css_导航菜单-js教程-PHP中文网

麦鸡的TAB切换功能结合了javascript和css_导航菜单

php中文网

发布： 2016-05-16 19:07:11

原创

1167人浏览过

这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了
做个滑动门,需要一个图片
麦鸡的TAB切换功能结合了javascript和css_导航菜单
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

复制代码代码如下:

精品文章
视频
照片
麦鸡的博客: 精品文章啊!麦鸡的博客欢迎你!; 视频啊!麦鸡的博客欢迎你!

讯飞智作-讯飞配音
讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

67

查看详情; 你的照片呢?麦鸡的博客欢迎你!

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  
}

演示地址