1, create a TAB, as well as the TAB content div.

2, write the selected TAB and the style of the TAB content div show and hide.

3, write js method, according to the selected TAB, display the corresponding TAB content.

example:

code is as follows:


<! Doctype html>
<HTML lang="useful - cn" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<The script type="text/javascript" >
function doClick (o) {
//that are currently in the object set CSS
o. chua lassName="nav_current";
var j;
var id;
var e;
//to iterate through all the TAB, not the chosen set its not the chosen CSS
the for (var I=1; i<=7; i++) {//i<7 a: how many columns can fill much value
id="nav" + I;
j=document getElementById (id);
e=document. GetElementById (" sub "+ I);
the if (id!=o.i d) {
j.carol carroll lassName="nav_link";
e.s tyle. The display="none";
} else {
e.s tyle. The display="block";

}}
}
</script>
<Style type="text/CSS" media="screen" >
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, and h6, pre, code, the form, the fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0; Padding: 0}
fieldset, img {none border: 0}
: focus {the outline: 0}
dis {display: block; }
undis {display: none; }
ol, ul {list - style: none}
fr {display: inline; Float: right! Important}
. Fl {display: inline; Float: left! Important}
show {display: block}
hide {display: none}
highlight {color: #F30! Important}
important {the font - weight: bold! Important}
center {text - align: center! Important}
body {tahoma font: 12px/1.5, sans-serif. Color: #333}
a {text - decoration: none; Color: #333}
a: hover {text - decoration: underline; Color: #E30751}
nav_current {float: left; Background: #FFF. Color: #F00; }
nav_link {float: left; }
nav_current: hover, nav_link: hover {color: #FF6600; }
#DWW - menu {width: 978px; Overflow: hidden; Border: 1px #DCDCDC solid; }
#DWW - menu. Mod - hd {overflow: hidden; Height: 30px; The line - height: 30px; Position: relative; Background: #CCCCCC repeat - x 0 0}
#DWW - menu. Mod - hd li {float: left; Cursor: pointer; The text - align: center; Height: 30px; The line - height: 30px; Padding: 0px; Letter - spacing: 1px; The text - transform: uppercase; Border - right: 1px #DCDCDC solid}
#DWW - menu. Mod - hd li. Hover {the font - weight: 900; Background: ##FFF}
DWW - menu. The mod - bd {padding: 5px 10px}
#DWW - menu. Mod - bd div {color: #BFBFBF; The line - height: 24px}
#DWW - menu. Mod - bd div. Show {display: block}
#DWW - menu. Mod - bd div a {display: inline - block; Padding: 0px}
4 </style>
<Base target="_blank"/>
</head>
<Body>
<Div >
<Div id="DWW - menu" class="mod - TAB" >
<Div class="mod - hd" >
<Ul class="TAB - nav" >
<Li class="nav_current" id="nav1" >Label 1 </li>
<Li class="nav_link" id="nav2" >Label 2 </li>
<Li class="nav_link" id="nav3" >Label 3 </li>
<Li class="nav_link" id="nav4" >Label 4 </li>
<Li class="nav_link" id="nav5 >" Tag 5 </li>
<Li class="nav_link" id="nav6" >Tag six </li>
<Li class="nav_link" id="nav7" >Label 7 </li>
</ul>
</div>
<Div class="mod - bd >"
<Div class="dis" id="sub1" >
1
tag content </div>
<Div class="undis" id="sub2" >
2
tag content </div>
<Div class="undis" id="sub3 >"
tag content 3
</div>
<Div class="undis" id="sub4 >"
tag content
4 </div>
<Div class="undis" id="sub5 >"
tag content
5 </div>
<Div class="undis" id="sub6 >"
tag content
6 </div>
<Div class="undis" id="sub7 >"
7
tag content </div>
</div>
</div>
</div>
</body>
</html>


This concludes the body part