[HTML] 纯文本查看 复制代码
<div class="tab">
<ul>
<li id="a1" class="curr">tab_01</li>
<li id="a2">tab_02</li>
<li id="a3">tab_03</li>
</ul>
</div>
<div id="con_a_1" class="cc">111<br />
111<br />
111<br />
11</div>
<div id="con_a_2" class="cc" style="display:none;">22<br />
222<br />
222<br />
222</div>
<div id="con_a_3" class="cc" style="display:none;">33<br />
333<br />
333<br />
333</div>
<div class="tab">
<ul>
<li id="b1" class="curr">tab_01</li>
<li id="b2">tab_02</li>
<li id="b3">tab_03</li>
</ul>
</div>
<div id="con_b_1" class="cc">111<br />
111<br />
111<br />
11</div>
<div id="con_b_2" class="cc" style="display:none;">22<br />
222<br />
222<br />
222</div>
<div id="con_b_3" class="cc" style="display:none;">33<br />
333<br />
333<br />
333</div>
<div class="tab">
<ul>
<li id="c1" class="curr">tab_01</li>
<li id="c2">tab_02</li>
<li id="c3">tab_03</li>
<li id="c4">tab_04</li>
</ul>
</div>
<div id="con_c_1" class="cc">111<br />
111<br />
111<br />
11</div>
<div id="con_c_2" class="cc" style="display:none;">22<br />
222<br />
222<br />
222</div>
<div id="con_c_3" class="cc" style="display:none;">33<br />
333<br />
333<br />
333</div>
<div id="con_c_4" class="cc" style="display:none;">44<br />
444<br />
444<br />
444</div>
[CSS] 纯文本查看 复制代码
.tab {
height:23px;
}
.tab ul {
list-style:none;
}
.tab li {
border:1px solid #ccc;
background:#eee;
cursor:pointer;
display:block;
float:left;
text-align:center;
text-decoration:none;
width:68px;
font-size:12px;
height:21px;
line-height:21px;
margin:0 2px;
position:relative;
top:1px;
z-index:9;
}
.tab li:hover {
text-decoration:underline;
}
.tab li.curr {
background:#fff;
border-bottom-color:#fff;
cursor:default;
font-weight:bold;
}
.cc {
border:1px solid #ccc;
padding:10px;
}
[JavaScript] 纯文本查看 复制代码
// tab
function setTab(name, cursel, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var con = document.getElementById("con_" + name + "_" + i);
menu.className = i == cursel ? "curr": "";
con.style.display = i == cursel ? "block": "none";
}
}