在javascript中切换图层

Toggling Layers in javascript

本文关键字：图层 javascript      更新时间：2023-09-26

我使用的以下JavaScript与单个onclick函数一起工作很好。我需要两个onclick函数在同一时间。

// JavaScript Document
var state = 'hidden';
function showhide(layer_ref) {
    if (state == 'visible') {
        state = 'hidden';
    }
    else {
        state = 'visible';
    }
    if (document.all) { //IS IE 4 or 5 (or 6 beta)
        eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) { //IS NETSCAPE 4 or below
        document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
    }
}

下面的HTML onclick工作正常

<a href="#" onclick="showhide('sidebar')" ><img src="supports/images/cp.png" width="86" height="20" /></a>

现在，我需要精确的语法来同时切换两层。我尝试使用以下代码，但它不工作。谁能帮我纠正一下? 

<a href="#" onclick="showhide('sidebar'); showhide('div_menu');" ><img src="supports/images/cp.png" width="86" height="20" /></a>

试试这段代码。

<html>
    <head>
        <script type="text/javascript">
            var setT;
            function toggle(id){
                var myDiv=document.getElementById(id);
                if(myDiv.style.visibility=='hidden'||myDiv.style.visibility==''){
                    myDiv.style.visibility='visible';
                    setT = setTimeout('closeD("'+id+'")',3000)
                }
                else{closeD(id)}
            }
            function closeD(id){
                document.getElementById(id).style.visibility='hidden';
                if(setT){clearTimeout(setT)}
            }
        </script>
    </head>
    <body>
        <a href="#" onClick="toggle('mydiv'); toggle('mydiv2')">show/hide</a>
        <br>
        <div id="mydiv">my div</div>
        <div id="mydiv2">my div2</div>
    </body>
</html>

不要使用var state = 'hidden'，它是全局变量，使用state作为showhide的函数参数

钟舒的意思是在不同的层之间只有一个state变量是共享的。

我不知道为什么你想要支持像Netscape 4或IE 5这样老的浏览器，因为除了博物馆或复古计算博览会你不会在任何地方看到它们，而且我只在它们存在的时候使用HTML(不是JS)，所以我真正能做的就是为所有现代浏览器提供一个片段，它应该说明解决这个问题的最佳方法:

// Reinvent jQuery's .toggle() without the years of polish and bugfixing
function showhide(node_id) {
    if (document.getElementById) {
        node = document.getElementById(node_id);
        state = node.style.visibility
        if (state == 'visible') { 
            node.style.visibility = 'hidden';
        } else { 
            node.style.visibility = 'visible';
        }
    }
}
相关文章：