DIV 层切换
<html>
<head>
<title>tab控件</title>
</head>
<body>
<div class="bdtg-tit">
<ul id="oUlTab">
<li class="on"><a href="#"><p>a</p></a></li>
<li><a href="#"><p>b</p></a></li>
<li><a href="#"><p>c</p></a></li>
</ul>
</div>
<div class="bq_d" id="oDivTab1">
<div class="bq_n">
<div class="bdtg-list">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td i Align="top">
content1
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="bq_d" id="oDivTab2" style="DISPLAY: none">
<div class="bq_n">
<div class="bdtg-list">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td vAlign="top">
content2
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="bq_d" id="oDivTab100" style="DISPLAY: none">
<div class="bq_n">
<div class="bdtg-list">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td vAlign="top">
content3
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<SCRIPT language=JavaScript>
<!--
var nFocus = 0;
var bFlag = false;
var aLiTab, aDivTab;
function c1() {
var $ = function c($) {
return document.getElementById($);
};
aLiTab = $("oUlTab").getElementsByTagName("li");
aDivTab = [$("oDivTab1"), $("oDivTab2"), $("oDivTab100")];
for (var i = 0; i < aLiTab.length; i++) {
(
function(i) {
var t = aLiTab[i];
t.onclick = function c() {
if (nFocus != i) {
aLiTab[nFocus].className = "";
aDivTab[nFocus].style.display = "none";
nFocus = i;
aLiTab[nFocus].className = "on";
aDivTab[nFocus].style.display = "";
}
bFlag = true;
};
t.onmouseout = function c() {
bFlag = false;
};
}
) (i);
}
};
//-->
</SCRIPT>
<script type="text/javascript">
window.onload = function() {
c1();
}
</script>
