点radio怎么用javascript控制div层，急求，在线等高手解答

<body>
<input type="radio" name="1" value="a" onclick="ontop()" />a
<input type="radio" name="1" value="b" onclick="ontop()" />b
<input type="radio" name="1" value="c" onclick="ontop()" />c<div id="A" style="z-index:3; position:absolute;">a
   <div id="B" style="z-index:2; position:relative;">b
   <div id="C" style="z-index:1; position:absolute;">c</div>
   </div>
</div>三个div层重叠，怎么用radio控制，点击一个radio出现对应的div层，其他两个层被覆盖
急求高手解答，最好有源代码，谢谢

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0;}
    body{font-size:12px; color:#000; text-align:center;}
    </style>
    </head><body>
    <input type="radio" name="1" value="a" />a
    <input type="radio" name="1" value="b" />b
    <input type="radio" name="1" value="c" />c
        
        <div id="div_box" style="width:500px; height:500px; position:relative;">
         <div style="width:500px; height:500px; position:absolute; left:0px; top:0px; background:#0C0; z-index:3;">a</div>
            <div style="width:500px; height:500px; position:absolute; left:0px; top:0px; background:#0CF; z-index:2;">b</div>
            <div style="width:500px; height:500px; position:absolute; left:0px; top:0px; background:#F09; z-index:1;">c</div>
        </div>
        
        <script>
         var inps = document.getElementsByTagName('input'),
    len = inps.length,
    divs = document.getElementById('div_box').getElementsByTagName('div');

    for(var i = 0; i < len; i++){
    !function(i){
    inps[i].onclick = function(){
    divs[i].style.zIndex = 3;

    for(var j = 0,dlen = divs.length; j < dlen; j++){
    if(j != i){
    divs[j].style.zIndex = j;
    }
    }
    };
    }(i)
    }
        </script>
    </body>
    </html>