请大家帮我检查一个控制层的显示与隐藏的问题

下面是我写的，可以工作。<html>
<head>
<title>css</title>
<script type="text/javascript" language="JavaScript">
function setActive(c){
document.getElementById("red").style.display = "none";
document.getElementById("yellow").style.display = "none";
document.getElementById(c).style.display = "block";
}</script>
<style>
#red {
    background:red;
    height:300px;
    margin:100px;
    padding:0px;
display:none;
}
#yellow {
    background:yellow;
    height:300px;
    margin:100px;
    padding:0px;
display:none;
}
</style>
</head>
<body>
<div>
<a href="#" onclick="setActive('red'); return false;">红色</a> &nbsp; | &nbsp; 
<a href="#" onclick="setActive('yellow'); return false;">黄色</a>
</div>
<div id="yellow">
黄
</div>
<div id="red">
红
</div>
</body>
</html>

解决方案 »

  1.   

    <html>
    <head>
    <title>css</title>
    <script type="text/javascript" language="JavaScript">
    function setActiveStyleSheet(testid) {
     var all = document.getElementsByTagName('div');
    for(var i=0;i<all.length;i++)
    {
    if(all[i].id=='')
    {
    continue;
    }
    if(testid==all[i].id)
    {
    document.getElementById(testid).style.display='block';
    }
    else
    {
    document.getElementById(all[i].id).style.display='none';

    }
    }
    }
    </script>
    <style>
    #red {
        background:red;
        height:300px;
        margin:100px;
        padding:0px;
    }
    #yellow {
        background:yellow;
        height:300px;
        margin:100px;
        padding:0px;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="#" onclick="setActiveStyleSheet('red'); return false;">红色</a> &nbsp; | &nbsp; 
    <a href="#" onclick="setActiveStyleSheet('yellow'); return false;">黄色</a>
    </div>
    <div id="yellow">
    黄
    </div>
    <div id="red" style="display:none">
    红
    </div>
    </body>
    </html>
    lz试试这个
      

  2.   

    niuxinlong :
        你好！你的代码没有问题，
     
         看来你这方面用的很熟练，值得学习啊！     谢谢你和浴火凤凰的帮助！