div滑门效果的JS解释

来源：百度知道 编辑：UC知道 时间：2024/06/11 03:27:44
<script language=javascript>
function secBoard1(n)
{
for(i=0;i<menu1.childNodes.length;i++)
menu1.childNodes[i].className="sec1";
menu1.childNodes[n].className="sec2";
for(i=0;i<main1.childNodes.length;i++)
main1.childNodes[i].style.display="none";
main1.childNodes[n].style.display="block";
}
</script>
<div id="header1">
<ul id="menu1">
<li onMouseOver="secBoard1(0)" class="sec2">最新新闻</li>
<li onMouseOver="secBoard1(1)" class="sec1">最新文章</li>
<li onMouseOver="secBoard1(2)" class="sec1">最新日志</li>
<li onMouseOver="secBoard1(3)" class="sec1">论坛新帖</li>
</ul>
<!--内容显示区域-->
<ul id="main1">
<li class="block">第

这段代码不复杂。它的效果是当鼠标移到某个菜单时，突出这个菜单（通过sec2这个css类），并显示其下拉内容。而对其他的菜单和对应内容进行变换css类和隐藏。

onMouseOver这个事件会在鼠标移过时触发，调用secBoard1这个函数，并把当前的菜单序号作为参数传入。该函数做了两件事，一是改变当前菜单和其他菜单分别对应的css；二是改变当前内容和其他内容分别对应的style属性中的显示/隐藏域。

具体可参考javascript的DOM思想
首先得到DOM结构的length，menu1.childNodes.length；然后对每个节点设置display属性。这样就能达到效果。