The Tab switching function of the pheasant combines JavaScript and CSS.

This type of things is mostly online, but my friends said Program Good program philosophy (XI ...), 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

CopyCode 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 {
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 code The Code is as follows: <DL class = "nav" id = "maiji_tab">

<DT class = "on">
<A href = "# This" href = "# This" onclick = "maiji_tab (0)"> <span> excellent productsArticle</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 code Code: var maiji_tab = function (Num) {// Add a class according to 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