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

thunderjj333 2011-07-23 02:03:39

<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层，其他两个层被覆盖
急求高手解答，最好有源代码，谢谢

...全文

102 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

thunderjj333 2011-07-23

打赏
举报

好人啊，要的就是这个...膜拜一下，研究...

MuBeiBei 2011-07-23

打赏
举报

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