Tab切换是开发中必不可少的一项内容,最通俗的解释是:通过不同的标签可以看到不同的内容,那么如何利用JS+DIV实现最简单的Tab切换呢?
首先我们看看下面一段HTML代码:
<div class="hb_zjhbn">
<div class="hbcx_link" id="cc1" onmouseover="setBab9('cc',1,2)">
标签一
</div>
<div style="display: none;" class="zjhb_xxk" id="con_cc_1">
<div id="hbgk1" name="河北概况1" runat="server" class=" column">
标签一对应的内容区域
</div>
</div>
<div class="hbcx_link" id="cc2" onmouseover="setBab9('cc',2,2)">
标签二
</div>
<div class="zjhb_xxk" id="con_cc_2" style="display: none;">
<div id="zygk1" name="资源概况1" runat="server" class=" column">
标签二对应的内容区域
</div>
</div>
</div>
主要特点是:标签的ID以cc+i命名,内容区域的ID以con_cc_+i命名,这样的好处是可以通过循环的方式对标签进行切换,不要一个个写
Js代码如下:
function setBab9(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 ? "hbcx_hover" : "hbcx_link";
con.style.display = i == cursel ? "block" : "none";
if (document.getElementById("con_" + name + "_" + "more_" + i)) {
document.getElementById("con_" + name + "_" + "more_" + i).style.display = i == cursel ? "block" : "none";
}
}
}
.hb_zjhb {
width: 998px;
height: auto;
margin: 0 auto;
/*border: 1px solid #d7d7d7;*/
}
.zjhb_xxk {
width: 922px;
height: 100%;
float: left;
border-right: 1px solid #ffffff;
}
.hbcx_link {
width: 31px;
height: 274px !important;
height: 173px;
font-size: 12px;
color: #000000;
text-align: center;
padding-top: 20px;
line-height: 30px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
background-color: #e9e9e9;
float: left;
}
.hbcx_hover {
background-image: url("Images/addimg/zjhb_listbg.jpg");
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
color: #ffffff;
float: left;
font-size: 14px;
font-weight: bold;
height: 274px !important;
line-height: 30px;
padding-top: 20px;
text-align: center;
width: 31px;
}