JavaScript实现显示和隐藏页面中的某个部分

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>