JS 实现div的切换

最新推荐文章于 2023-05-12 21:45:49 发布

luoxiao492

最新推荐文章于 2023-05-12 21:45:49 发布

阅读量482

点赞数

分类专栏： JS前端控制文章标签： JS 实现div的切换 div的切换 JS+css实现层的切换

JS前端控制专栏收录该内容

2 篇文章 0 订阅

订阅专栏

‍<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>莫得标题</title>
<style type="text/css">
ul{ list-style:none}
</style>
<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"), $("oDivTab3")];

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>

</head>
<body>
[align=top" style=" line-height:24px;]
111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111

111111111111111
</td>
</tr>
</table>
[/align]

</div>
</div>
[align=top" style=" line-height:24px;]
222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222

222222222222222222
</td>
</tr>
</table>
[/align]
</div>
</div>

[align=top" style=" line-height:24px;]
33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333
</td>
</tr>
</table>
[/align]
</div>
</div>

[align=top" style=" line-height:24px;]
4444444444444444444444444444444444444444444444

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333

33333333333333333
</td>
</tr>
</table>
[/align]
</div>
</div>

</body>
</html>