JavaScript實現顯示和隱藏頁面中的某個部分

來源:互聯網
上載者:User

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>

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.