Maiji's TAB switching function combines javascript and css

Maiji's TAB switching function combines javascript and css_navigation menu

WBOY

Release： 2016-05-16 19:07:11

Original

1058 people have browsed it

There are a lot of this type of things on the Internet, but my friends said that my programming concept is good (hee...), so I also wrote a tab switch, and shamelessly called it Maiji's TAB switch (sorry first.), please reprint it. Mark Maiji’s blog, let’s start below
To make a sliding door, you need an image
Maiji's TAB switching function combines javascript and css_navigation menu
CSS

Copy the code The code is as follows:

.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

Copy code The code is as follows:

< ;span>Excellent articles
Video
Photo
McChicken’s Blog< ;/a>: Excellent article!Welcome to Maiji’s blog!

< ;/dd>; Video!Welcome to Maiji’s blog!; Where are your photos?< ;a href=”http://www.wler.cn/blog” href=”http://www.wler.cn/blog” target=”_blank”>Welcome to Maiji’s blog!

🎜>

The code is as follows:

var maiji_tab = function(num){//Add class according to mun to make it display 
var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//Get the node 
var ddArray = document.getElementById('maiji_tab').getElementsByTagName("dd"); 
for (var i = 0; i < ddArray.length; i ){ 
 dtArray[i]. className = '';//Cancel class 
 ddArray[i].className = ''; 
} 
 dtArray[num].className = 'on'; 
 ddArray[num].className = 'on';//Add class 
}

Demo address