在客户端用JS如何隐藏用户控件？
<%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "Default.aspx.cs " Inherits= "_Default " %>
<%@ Register TagPrefix= "DaoHang1 " TagName= "Style1 " Src= "~/Style1.ascx " %>
<%@ Register TagPrefix= "DaoHang2 " TagName= "Style2 " Src= "~/Style2.ascx " %>
<!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 runat= "server ">
<title> 导航 </title>
<link href= "style.css " rel= "stylesheet " type= "text/css "/>
<script language= "javascript ">
//改变样式
function changeStyle()
{
var obj = document.getElementById( "DlistStyle ");
var index = obj.selectedIndex;
if(obj.options[index].value == "01 ")
{
document.getElementById( "style1 ").style.display = "none ";
document.getElementById( "style2 ").style.display = "block ";
}
else if(obj.options[index].value == "02 ")
{
document.getElementById( "style1 ").style.display = "none ";
document.getElementById( "style2 ").style.display = "block ";
}
else if(obj.options[index].value == "03 ")
{
window.alert( "none ");
}
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<table id= "table01 " width= "100% " runat= "server " cellpadding= "0 " cellspacing= "0 " border= "0 ">
<tr>
<td align= "center "> <div> 导航数量： <input type= "text " id= "num " style= "width: 46px " runat= "server "/> <input type= "button " id= "btnOK " name= "Ok " value= "确定 " />
</div>
</td>
</tr>
<tr>
<td align= "center " style= "height: 22px "> <div> 导航样式： <asp:DropDownList ID= "DlistStyle " runat= "server " Width= "97px " onChange= "changeStyle(); ">
<asp:ListItem Value= "01 "> 样式1 </asp:ListItem>
<asp:ListItem Value= "02 "> 样式2 </asp:ListItem>
<asp:ListItem Value= "03 "> 样式3 </asp:ListItem>
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td align= "center "> <div>
<DaoHang1:Style1 ID= "style1 " runat= "server "/>
</div>
</td>
</tr>
<tr>
<td align= "center ">
<div>
<DaoHang2:Style2 ID= "style2 " runat= "server "/>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
以上是代码
运行提示 缺少对象错误
我想通过选择DropDownList才显示隐藏用户控件，把控件放到panel中后 控件的css变化了。。。郁闷
[解决办法]
document.getElementById( "style1 ").style.display = "none ";
document.getElementById( "style2 ").style.display = "block ";
改成下面的试试
document.getElementById( " <%=style1.ClientID%> ").style.display = "none ";
document.getElementById( " <%=style2.ClientID%> ").style.display = "block ";
[解决办法]
var obj = document.getElementById( "DlistStyle ");
==================================================
var obj = document.getElementById( " <%=DlistStyle.clientid%> ");
[解决办法]
<%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "t3.aspx.cs " Inherits= "Test_t3 " %>
<!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 id= "Head1 " runat= "server ">
<title> 导航 </title>
<link href= "style.css " rel= "stylesheet " type= "text/css "/>
<script language= "javascript ">
//改变样式
function changeStyle(e)
{
var index = e.selectedIndex;
if(e.options[index].value == "01 ")
{
document.getElementById( "_a ").style.display = "none ";
document.getElementById( "_b ").style.display = "block ";
}
else if(e.options[index].value == "02 ")
{
document.getElementById( "_a ").style.display = "none ";
document.getElementById( "_b ").style.display = "block ";
}
else if(e.options[index].value == "03 ")
{
window.alert( "none ");
}
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<table id= "table01 " width= "100% " runat= "server " cellpadding= "0 " cellspacing= "0 " border= "0 ">
<tr>
<td align= "center "> <div> 导航数量： <input type= "text " id= "num " style= "width: 46px " runat= "server "/> <input type= "button " id= "btnOK " name= "Ok " value= "确定 " />
</div>
</td>
</tr>
<tr>
<td align= "center " style= "height: 22px "> <div> 导航样式： <asp:DropDownList ID= "DlistStyle " runat= "server " Width= "97px " onChange= "changeStyle(this); ">
<asp:ListItem Value= "01 "> 样式1 </asp:ListItem>
<asp:ListItem Value= "02 "> 样式2 </asp:ListItem>
<asp:ListItem Value= "03 "> 样式3 </asp:ListItem>
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td align= "center "> <div id= "_a ">
a
</div>
</td>
</tr>
<tr>
<td align= "center ">
<div id= "_b ">
b
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
