This type of things is widely used on the Internet, but my friends say that my program philosophy is good (Hey ...), I also wrote a tab switch, with a thick cheek to call it the TAB switch of the rooster (sweat first.). For reprinting, please also indicate the blog of the rooster, and the following will start.
A sliding door requires an image.
CSS
Copy codeThe 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 {
Float: left; display: block; height: 24px; line-height: 26px; overflow: hidden;
Background: url (/upload/200712172002000000.gif) no-repeat 0-24px
}
. Nav dt a span {
Display: block; padding: 0 15px 0 0; margin: 0 0 15px;
Background: url (/upload/200712172002000000.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 codeThe Code is as follows:
<Dl class = "nav" id = "maiji_tab">
<Dt class = "on">
<A href = "# this" href = "# this" onclick = "maiji_tab (0)"> <span> excellent articles </span> </a>
</Dt>
<Dt>
<A href = "# this" href = "# this" onclick = "maiji_tab (1)"> <span> video </span> </a>
</Dt>
<Dt>
<A href = "# this" href = "# this" onclick = "maiji_tab (2)"> <span> photo </span> </a>
</Dt> <dt>
<A href = "http://www.wler.cn/blog" href =" http://www.wler.cn/blog" target = "_ blank"> <span> rooster blog </span> </a>
</Dt>
<Dd class = "on">
<P> excellent articles! <A href = "http://www.wler.cn/blog" href =" http://www.wler.cn/blog" target = "_ blank"> welcome to the blog of the rooster! </A> </p>
</Dd> <dd>
<P> video! <A href = "http://www.wler.cn/blog" href =" http://www.wler.cn/blog" target = "_ blank"> welcome to the blog of the rooster! </A> </p>
</Dd> <dd>
<P> what about your photos? <A href = "http://www.wler.cn/blog" href =" http://www.wler.cn/blog" target = "_ blank"> welcome to the blog of the rooster! </A> </p>
</Dd> </dl>
Javascript
Copy codeThe Code is as follows:
Var maiji_tab = function (num) {// Add a class Based on mun to 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 the class
DdArray [I]. className = '';
}
DtArray [num]. className = 'on ';
DdArray [num]. className = 'on'; // Add a class
}
Demo address