注册 登录
编程论坛 → JavaScript论坛

我的代码哪里写错了为什么运行不了！高手来看下！

bmn1243 发布于 2011-06-17 20:29， 617 次点击
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer2 {
    position:absolute;
    left:18px;
    top:41px;
    width:296px;
    height:198px;
    z-index:2;
    display:none;
}
#Layer3 {
    position:absolute;
    left:21px;
    top:42px;
    width:290px;
    height:174px;
    z-index:3;
    display:none;
}
#Layer4 {
    position:absolute;
    left:18px;
    top:41px;
    width:292px;
    height:173px;
    z-index:4;
    display:none;
}
-->
</style>
<script language="javascript">

            function aa(x,y,z)
            {
            if(x.style.visibility=="hidden";)
            {
                    x.style.visibility="visible";
                    y.style.visibility="hidden";
                    z.style.visibility="hidden";
            }
            }
</script>
</head>
<body>
<a href="#" onclick="aa(Layer2,Layer3,Layer4);">点击显示层1</a>    <a href="#" onclick="aa(Layer3,Layer2,Layer4);">点击显示层2</a>  <a href="#" onclick="aa(Layer4,Layer2,Layer3);">点击显示层3</a>
<div id="Layer2">这是层1的内容</div>
<div id="Layer3">这是层2的内容</div>
<div id="Layer4">这是层3的内容</div>
</body>
</html>
我的目的是，点击显示层1  然后就显示出来 层1的内容  然后隐藏其他两个层，依次类推 其他两个也是这样的，点哪个显示哪个其余的隐藏！
1 回复
#2
kongmajian2011-06-20 13:57
程序代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏显示</title>
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    left:20px;
    top:40px;
    width:300px;
    height:200px;
    z-index:1;
    background-color:red;
}
#Layer2 {
    position:absolute;
    left:20px;
    top:40px;
    width:300px;
    height:200px;
    z-index:2;
    background-color:blue;
}
#Layer3 {
    position:absolute;
    left:20px;
    top:40px;
    width:300px;
    height:200px;
    z-index:3;
    background-color:green;
}

-->
</style>
<script language="javascript">   
    function aa()
    {
        var x = document.getElementById("Layer1");
        var y = document.getElementById("Layer2");
        var z = document.getElementById("Layer3");
        x.style.display="block";
        y.style.display="none";
        z.style.display="none";
    }
    function bb()
    {
        var x = document.getElementById("Layer1");
        var y = document.getElementById("Layer2");
        var z = document.getElementById("Layer3");
        y.style.display="block";
        x.style.display="none";
        z.style.display="none";
    }
    function cc()
    {
        var x = document.getElementById("Layer1");
        var y = document.getElementById("Layer2");
        var z = document.getElementById("Layer3");
        z.style.display="block";
        x.style.display="none";
        y.style.display="none";
    }
</script>
</head>
<body>
<a href="javascript:aa();">点击显示层1</a>
<a href="javascript:bb();">点击显示层2</a>
<a href="javascript:cc();">点击显示层3</a>   
<br />
<div id="Layer1" style="display:none">这是层1的内容</div>
<div id="Layer2" style="display:none">这是层2的内容</div>
<div id="Layer3" style="display:none">这是层3的内容</div>
</body>
</html>
display:none写在DIV中~为了区分3个DIV我加了简单颜色。
1
©2025, BC-CN.NET
电脑版