简单实用的js Tab切换

vingoo

[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";
    }
}