-->动态HTML教程-->4.4 完成菜单条的制作

Dynamic HTML

后页 前页
目录
北极星书库
4.4 完成菜单条的制作


现在给菜单条加入脚本使其能响应鼠标的行为并执行相应的功能。我们利用visibility属性隐藏子菜单项目并在菜单项目被点击时显示子菜单。


处理visibility时,你会立刻遇到DOM不兼容的问题。Netscape的DOM更多地受其LAYER标签和属性的影响。所以即使在DOM中你将一个对象的visibility属性设置为hidden(隐藏),Netscape也会将其显示出来。如果你加入下面这条:

    if (daMenu.visibility == 'hidden')


你所得到的不是样式表语法的参数值,而是LAYERS语法的参数值。


所以如果你设置document.foo.visibility = 'visible', 则代码将会按照你预想的那样执行,对象foo在屏幕中可以被看到。如果你用alert(document.foo.visibility)检查参数值, 则返回的数值是show。解决办法是设置一些变量,用标准的条件并设定一个名为visible的变量用于Netscape中的'show',在Internet Explorer中则设置'visible'。

在Netscape中设置一个名为'hide' 的变量,在Internet Explorer'则用hidden'。在相应的字符串位置放入这些变量,则问题就解决了。

    <script>
    
    if (document.layers) {
    visible = 'show';
    hidden = 'hide';
    } else if (document.all) {
    visible = 'visible';
    hidden = 'hidden';
    }


    function barTog(menu) {
    if (document.layers) {
    daMenu = document.layers[menu];
    } else if (document.all) {
    daMenu = document.all(menu).style;
    }
    if (daMenu.visibility == visible) {
    daMenu.visibility = hidden;
    } else {
    daMenu.visibility = visible;
    }
    lastMenu = daMenu;
    }
    </script>

barTog函数所做 的是设置标准的条件语句,如果在被传送的变量菜单中设定的对象是visible,则隐藏该对象,否则就显示该对象。然后将对该对象的引用传递给名为lastMenu的全局变量(这样以来,以后你可以再关闭它)。 接下来你要做的就是调用这个函数,所以在菜单条中你将"Webmonkey"设定一个anchor(锚区),并设定被点击是执行的行为。

    
    
    <div id="webmonkey" class="daMenu">
    <a class="itemAnchor"
    onclick="javascript: barTog('moreMonkey'); return false;">
    Webmonkey
    </a>
    </div>

这段代码执行barTog函数,并将应该被打开或关闭的DIV 的名称传递给它。显示结果如下


后页
前页
目录
北极星书库