Heim > Web-Frontend > js-Tutorial > 麦鸡的TAB切换功能结合了javascript和css_导航菜单

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

WBOY
Freigeben: 2016-05-16 19:07:11
Original
1058 Leute haben es durchsucht

这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个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

复制代码 代码如下:

 

 
  精品文章 
 
 
  视频 
 
 
  照片 
 
  麦鸡的博客 
 

 
  

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

 
 
  

视频啊!麦鸡的博客欢迎你!

 
 
  

你的照片呢?麦鸡的博客欢迎你!

 
 

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 
}

演示地址
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage