怎么实现这种效果

比如在顶端有一组radio 按钮，横着摆的，下面是一个div 层层里面有个表单。
刚打开这个页面时候没有radio 按钮被选中然后层里面的表单显示灰色就是不可以点。
再然后选中任何一个radio 就会显示层里面的不同的表单，同时不刷新页面，就是激活那样。如何实现？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

就是代码无从下手啊可能要用到js 但我不太懂js  刚开始学…
就是代码无从下手啊可能要用到js 但我不太懂js  刚开始学…
<style type="text/css">
#lunch_nav, #dinner_nav
{
  width:50%;
  overflow:hidden;
  float:left;
}
</style>
<div>
<div id="lunch_nav"><?php
$query="SELECT * FROM DESTINATION WHERE is_lunch='yes'";
$result=mysql_query($query);
while($get_details=mysql_fetch_array($result))
{
     $dest_name=$get_details['dest_name'];
?>
    <input type="radio" name="destination_name"/><?php echo $dest_name; ?>
<?php
}
?>
</div>
<div id="dinner_nav">
<?php
$query="SELECT * FROM DESTINATION WHERE is_dinner='yes'";
$result=mysql_query($query);
while($get_details=mysql_fetch_array($result))
{
     $dest_name=$get_details['dest_name'];
?>
    <input type="radio" name="destination_name"/><?php echo $dest_name; ?>
<?php
}
?>
</div>
</div>
<div id="restuarant_list">

<?php include("include/shop_list.php");?>
</div>
js控制表单里的内容默认是disabled 选了中以后取消disabled
那如果是表单以外的内容呢？我想把那个include的页面所有的都disable掉  选了radio之后才能正常。
changeForm.html<!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>check</title>
</head><body>
<script>
function changeForm(param){
document.getElementById("ifr").src = param;
}
</script>
<div>
<label><input type="radio" name="check" onclick="changeForm('form1.html')" />form1</label>
<label><input type="radio" name="check" onclick="changeForm('form2.html')" />form2</label>
<label><input type="radio" name="check" onclick="changeForm('form3.html')" />form3</label><br />
<iframe id="ifr" name="ifr" src="" frameborder="0" scrolling="no" style="border:0"></iframe>
</div>
</body>
</html>form1.html<!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>
</head><body>
<form name="form1" method="post" action="">
<input type="text" name="input" value="form1" /><br />
<input type="button" name="btn" value="submit" />
</form>
</body>
</html>form2.html<!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>
</head><body>
<form name="form2" method="post" action="">
<input type="text" name="input" value="form2" /><br />
<input type="checkbox" name="chk" value="2" /> form2<br />
<input type="button" name="btn" value="submit" />
</form>
</body>
</html>form3.html<!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>
</head><body>
<form name="form3" method="post" action="">
<input type="text" name="input" value="form3" /><br />
<input type="text" name="input1" value="form33" /><br />
<input type="button" name="btn" value="submit" />
</form>
</body>
</html>
对我就是差不多这个意思，但是我代码里面不能插入iframe
我必须得用<?php include(...)?>把页面加进去然后根据前面radio的值显示include里面不同内容，该怎么办？
果断Ajax：
参考;
http://topic.csdn.net/u/20120513/19/6133363b-ea5a-4b36-b719-b0e8483a15e1.html
http://topic.csdn.net/u/20120516/09/dd9c19b5-bbf3-4f1f-bdbb-d58ade236f5f.html