JavaScript實現顯示和隱藏頁面中的某個部分
如:
當我點擊查詢條件是,下邊的查詢塊(Panel)隱藏,在次擊時顯示。
實現方法:
Javascript代碼:
function QueryOnChang()//切換查詢條件的
{
//
if(document.all["pnlSearch"].style.display=="none")
{
document.all["pnlSearch"].style.display='';
//event.srcElement.innerText="";
document.all["QueryImg"].src="http://www.cnblogs.com/Images/move_up.gif";
}
else
{
document.all["pnlSearch"].style.display='none';
//event.srcElement.innerText="";
document.all["QueryImg"].src="http://www.cnblogs.com/Images/move_down.gif";
}
}
頁面源碼:
<tr>
<td align="center" width="90%" height="1">
<asp:Label ID="LblTitle" runat="server" CssClass="PageTitle">我的使用者組</asp:Label></td>
<td align="center" height="1">
<img id="QueryImg" alt="" src="http://images.cnblogs.com/move_up.gif" border="0"><a onclick="QueryOnChang(); return false"
href="#"><strong>查詢條件</strong></a>
</td>
</tr>
<tr>
<td colspan="2" height="1">
<asp:Panel ID="pnlSearch" runat="server" Width="100%" CssClass="TableStyle" Visible="True">
<table class="Grid" id="TableQuery" cellspacing="0" cellpadding="1" width="100%"
border="1">
<tr>
<td class="Lbl" style="height: 27px" width="15%" colspan="1" rowspan="1">
部門名稱:</td>
<td style="height: 27px" width="25%" colspan="1" rowspan="1">
<asp:TextBox ID="tbRoleName" runat="server" Width="80%"></asp:TextBox></td>
<td class="Lbl" style="height: 27px" width="15%" colspan="1" rowspan="1">
</td>
<td class="txt" style="height: 27px" width="25%" colspan="1" rowspan="1">
</td>
</tr>
<tr>
<td class="Lbl" colspan="4" style="height: 22px">
<p align="center">
<asp:Button ID="btnQuery" runat="server" Text="查詢" CssClass="btn" OnClick="btnQuery_Click">
</asp:Button></p>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>