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