Question

我是ASP.NET新手。我需要在ASP.NET中创建一个只包含文本的显示/隐藏面板。面板需要具有滑动效果。我可以用回发来做。是否有任何内置控件可以在没有回发的情况下执行此操作。

enter image description here

此外，文本“显示”应更改为“隐藏”而不回发。

编辑：忘记提及我的申请中有几个这样的小组。

Answer 1

ASP.Net Ajax Control Toolkit具有accordian控件，具有可自定义的主题和效果，整个库值得一看。

Answer 2

你看过jQuery吗？

http://api.jquery.com/toggle/

Answer 3

你可以尝试这样......

     <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
function Show1_onclick() {
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
document.getElementById('Hidden1').value = 'Panel1';
}

function Show2_onclick() {
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
document.getElementById('Hidden1').value = 'Panel2';
}

function StartUpScript()
{
    if (document.getElementById('Hidden1').value == 'Panel1')
    {
        document.getElementById('Panel1').style.display ='block';
        document.getElementById('Panel2').style.display ='none';
    }
    else if (document.getElementById('Hidden1').value == 'Panel2')
    {
        document.getElementById('Panel1').style.display ='none';
        document.getElementById('Panel2').style.display ='block';
    }
}
// -->
    </script>

</head>
<body onload="StartUpScript()">
    <form id="form1" runat="server">
        <div>
            <input id="Show1" language="javascript" onclick="return Show1_onclick()" type="button"
                value="Show1" />
            <input id="Show2" language="javascript" onclick="return Show2_onclick()" type="button"
                value="Show2" />
            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
                <table id="Table1">
                    <tr>
                        <td style="width: 95px">
                            table1<br />
                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click1" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
                <table id="Table2">
                    <tr>
                        <td style="width: 99px">
                            table2<br />
                            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Click2" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <input id="Hidden1" runat="server" type="hidden" />
        </div>
    </form>
</body>
</html>

如何在ASP.NET中创建客户端显示/隐藏面板

3 个答案: