[求助]下拉表单控制层显示的问题....
这个是我从别的网站copy后改的，原来是图片按扭控制，我改成下拉表单控制后在IE中就不行了 :-(
偶是设计，js非常不好，研究了半天也没找到问题所在，哪位大侠帮帮吧？
感激不尽！！！
<!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> Welcome </title>
<style type= "text/css ">
<!--
#LeftSection{
float:left;
margin:5px 0 0 1px;
width:250px;
display:block;
}
#P_Section{
float:left;
width:100%;
border:1px solid #FF0000;
background-color:#FFFFCC;
}
.P_Select{
float:left;
border-bottom:1px solid #FF0000;
width:100%;
height:35px;
text-align:center;
padding-top:10px;
}
#EditSection{
float:right;
width:680px;
border:0;
margin:5px 60px 5px 0 !important;
margin:5px 30px 5px 0;
padding:0;
border:1px solid #003466;
}
#pmt_1,#pmt_2,#pmt_3,#pmt_4
{
width:100%;
}
#pmt_2,#pmt_3,#pmt_4{
display:none;
}
.SelectP{
padding-left: 2px;
font-family:Arial, Helvetica, sans-serif;
border: #CCCCCC 1px solid;
height:20px;
width:200px;
}
-->
</style>
</head>
<body>
<!--MAIN-->
<div id= "Container ">
<!-- left -->
<div id= "LeftSection ">
<div id= "P_Section ">
<div class= "P_Select ">
<SELECT name= " " class= "SelectP ">
<option value= " " id= "TAB_1 " onClick= "showDiv( '1 ') "> >> Layer1 </option>
<option value= " " id= "TAB_2 " onClick= "showDiv( '2 ') "> >> Layer2 </option>
<option value= " " id= "TAB_3 " onClick= "showDiv( '3 ') "> >> Layer3 </option>
<option value= " " id= "TAB_4 " onClick= "showDiv( '4 ') "> >> Layer4 </option>
</SELECT>
</div>
</div>
</div>
<div id= "EditSection ">
<div id= "pmt_1 "> <br /> Layer1. <br /> </div>
<div id= "pmt_2 "> <br /> Layer2 Layer2 . <br /> </div>
<div id= "pmt_3 "> <br /> Layer3 Layer3 Layer3 <br /> </div>
<div id= "pmt_4 "> <br /> Layer4 Layer4 Layer4 Layer4 <br /> </div>
</div>
<SCRIPT>
selOpt = ' ';
Options = [ '1 ', '2 ', '3 ', '4 '];
for(i = 0; i < Options.length; i++)
if(document.getElementById( 'TAB_ ' + Options[i]) !== null)
{
selOpt = Options[i];
document.getElementById( 'TAB_ ' + selOpt).id = 'TAB_ ' + selOpt + '_active ';
document.getElementById( 'pmt_ ' + selOpt).style.display = 'block ';
break;
}
function showDiv(divOpt)
{
document.getElementById( 'TAB_ ' + selOpt + '_active ').id = 'TAB_ ' + selOpt;
document.getElementById( 'pmt_ ' + selOpt).style.display = 'none ';
selOpt = divOpt;
document.getElementById( 'TAB_ ' + selOpt).id = 'TAB_ ' + selOpt + '_active ';
document.getElementById( 'pmt_ ' + selOpt).style.display = 'block ';
}
</SCRIPT>
</div>
</body>
</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> Welcome </title>
<style type= "text/css ">
<!--
#LeftSection{
float:left;
margin:5px 0 0 1px;
width:250px;
display:block;
}
#P_Section{
float:left;
width:100%;
border:1px solid #FF0000;
background-color:#FFFFCC;
}
.P_Select{
float:left;
border-bottom:1px solid #FF0000;
width:100%;
height:35px;
text-align:center;
padding-top:10px;
}
#EditSection{
float:right;
width:680px;
border:0;
margin:5px 60px 5px 0 !important;
margin:5px 30px 5px 0;
padding:0;
border:1px solid #003466;
}
#pmt_1,#pmt_2,#pmt_3,#pmt_4
{
width:100%;
}
#pmt_1,#pmt_2,#pmt_3,#pmt_4{
display:none;
}
.SelectP{
padding-left: 2px;
font-family:Arial, Helvetica, sans-serif;
border: #CCCCCC 1px solid;
height:20px;
width:200px;
}
-->
</style>
</head>
<body>
<SELECT name= "selectid " class= "SelectP " onchange= "showDiv(document.all.selectid.value) ">
<option value= "1 " > >> Layer1 </option>
<option value= "2 " > >> Layer2 </option>
<option value= "3 " > >> Layer3 </option>
<option value= "4 " > >> Layer4 </option>
</SELECT>
<div id= "EditSection "> <br> Layer1.ddd <br> </div>
<div id= "pmt_2 "> <br> Layer2 Layer2 . <br> </div>
<div id= "pmt_3 "> <br> Layer3 Layer3 Layer3 <br> </div>
<div id= "pmt_4 "> <br> Layer4 Layer4 Layer4 Layer4 <br> </div>
<div id= "pmt_1 "> <br> Lasdfasyer1.ddd <br> </div>
<SCRIPT>
function showDiv(divOpt)
{
//alert(document.getElementById( 'pmt_ ' + divOpt).outerHTML);
document.getElementById( 'EditSection ').innerHTML = document.getElementById( 'pmt_ ' + divOpt).innerHTML;
}
</SCRIPT>
</div>
</body>
</html>
