Question

我使用的以下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>

Answer 1

试试这段代码。

<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>

Answer 2

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

Answer 3

zhongshu的意思是，只有一个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';
        }
    }
}

在javascript中切换图层

3 个答案: