Question

底下这段javascript和CSS是滑动门技术 。麻烦解释下<SCRIPT>中的语言.谢谢

<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">主题一</li>
<li onMouseOver="secBoard(1)" class="sec1">主题二</li>
<li onMouseOver="secBoard(2)" class="sec1">主题三</li>
<li onMouseOver="secBoard(3)" class="sec1">主题四</li>
</ul>
<!--内容显示区域-->
<ul id="main">
<li class="block"><第一个内容</li>
<li class="unblock">第二个内容</li>
<li class="unblock">第三个内容</li>
<li class="unblock">第四个内容</li>
</ul>
<!--内容显示区域-->
</div>

Answer 1

function secBoard(n) {
// menu.childNodes.length：获取 ul id=menu 下面 li 的个数，li 属于 ul 的子节点
// for... 循环每一个子节点
for(i = 0; i < menu.childNodes.length; i++) {
// 将每一个子节点赋予 class sec1
menu.childNodes[i].className = "sec1";
}
// 再将鼠标停留的子节点赋予 class sec2
menu.childNodes[n].className = "sec2";

// 同上，main.childNodes.length：获取 ul id=main 下面 li 的个数
for(i = 0; i < main.childNodes.length; i++) {
// 隐藏 main 下面全部的 li
main.childNodes[i].style.display = "none";
}
// 再显示鼠标停留的子节点相对应的第n个内容
main.childNodes[n].style.display = "block";
}