TAB TAB Toggle Effect

<style type= "Text/css" >
<!--
* {margin:0; padding:0}
A{color: #333;}
Div, DL, DT, DD {display:inline-block;}
Div, DL, DT, DD {display:block}
h2{font:800 12px/20px "song Body";}
#tabs {border:1px solid #ccc; margin:40px; width:382px; padding:4px 0}
#tabs Div {padding:39px 4px 0px; position:relative;}
#tabs DT {text-align:center; font:12px/30px "Song Body";}
#tabs dd {font:12px/20px "Arial"; padding:10px;}
#tab1 DT, #tab4 DT, #tab7 DT, #tab10 DT, #tab13 dt {left:4px; top:4px}
#tab2 DT, #tab5 DT, #tab8 DT, #tab11 DT, #tab14 dt {left:130px; top:4px}
#tab3 DT, #tab6 DT, #tab9 DT, #tab12 DT, #tab15 dt {left:256px; top:4px}
#tab5 DT {left:130px; top:4px}
#tab6 DT {left:256px; top:4px}
. close DT {height:30px; width:120px; background: #FAFAFA; position:absolute; border:1px Solid #ccc}
. Close DD {Display:none}
. Open DT {height:35px; width:120px; background: #EBEBEB; position:absolute; border:1px solid #ccc; border-bottom:none;}
. Open DD {background: #EBEBEB; border:1px solid #ccc;}
-
</style>
<script type= "Text/javascript" >
Window.onload =
function () {
Alltabs = document.getElementById (' tabs '). getElementsByTagName (' DL ')
for (i = 0; i < alltabs.length; i++) {
Alltabs[i].classname = "Close";
Alltabs[6].classname = "open";
Alltabs[i].onmouseover = function () {
for (j = 0; J < Alltabs.length; J + +) {
Alltabs[j].classname = "Close";
}
This.classname = "open";
}
}
}
</script>

<div id= "tabs";
<div>
<dl id= "Tab1";
<dt>html</dt>
<dd>html </dd>
</dl>
<dl id= "tab2";
<dt>js code </dt>
<dd>js Code </dd>
</dl>
<dl id= "tab3";
<dt> build station tips </dt>
<dd>3</dd>
</dl>
</div>
<div>
<dl id= "TAB4";
<dt>4444</dt>
<dd>4</dd>
</dl>
<dl id= "tab5";
<dt>css technique </dt>
<dd>5</dd>
</dl>
<dl id= "tab6";
<dt>6666</dt>
<dd>6666</dd>
</dl>
</div

<div>
<DL id= "Tab7" >
<dt>HTML5</dt>
<dd>HTML5</dd>
</dl>
<DL id= "Tab8" >
<dt>js Code </dt>
<dd>8</dd>
</dl>
<DL id= "TAB9" >
<dt> Build Station Tips </dt>
<dd> Build Station Tips </dd>
</dl>
</div>
<div>
<DL id= "TAB10" >
<dt> Lazy people build station </dt>
<dd>10</dd>
</dl>
<DL id= "TAB11" >
<dt>js Code </dt>
<dd>js Code </dd>
</dl>
<DL id= "TAB12" >
<dt> Build Station Tips </dt>
<dd>12</dd>
</dl>
</div>

</div>

<pre>
Description: The style of the font:12px/30px "song Body"; is a style abbreviation: Font size/Line height;
Note. Open dt. Close dt #tabs Div and other styles in the width height, and spacing settings,
The right controls can create the effect you want.
JS code in the Alltabs[6].classname = "open"; is used to control the initial state, 6 is the initial state of the seventh
If this sentence is deleted, there is no initial state.
Tested IE6, IE7, IE8, Firefox are normal
</pre>

TAB TAB Toggle Effect