Question

有三个按钮，现在有三个面板，如果我点击按钮1然后显示面板一个，如果是秒，那么第二个和第三个相同，那么可能是条件。？

Answer 1

使用javascripts可以很容易。 asp.net方式可以是：

将按钮放在面板外面。

将EnableViewState属性标记为true以获取aspx上的所有面板：

<asp:Panel id="panel1" EnableViewstate = "true" runat="server">
...
</asp:Panel>

在Page_Load方法上，添加以下内容：

if(!IsPostBack)
{
   panel1.Visible = false;
   panel2.Visible = false;
   panel3.Visible = false;
}

现在在按钮处理程序中，只需将相关面板的Visible属性更改为true，将其他属性更改为false，如：

protected void btn1_click(object sender, EventArgs e)
{
   panel1.Visible = true;
   panel2.Visible = false;
   panel3.Visible = false;
}

Answer 2

有很多方法可以做到这一点。例如，如果单击button1，下面的代码将显示panel1，如果单击button2等，则显示panel2等。这只是一种快速而肮脏的方式来完成您的要求。

    <asp:Button ID="Button1" runat="server" AssociatedPanelClass="Panel1" Text="Button 1" class="btn" />
    <asp:Button ID="Button2" runat="server" AssociatedPanelClass="Panel2" Text="Button 2" class="btn" />
    <asp:Button ID="Button3" runat="server" AssociatedPanelClass="Panel3" Text="Button 3" class="btn" />

    <asp:Panel ID="Panel1" runat="server" class="panel panel1 selected">
        <asp:Label ID="Label1" runat="server" Text="Label" >Panel 1</asp:Label>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" class="panel panel2">
        <asp:Label ID="Label2" runat="server" Text="Label" >Panel 2</asp:Label>
    </asp:Panel>
    <asp:Panel ID="Panel3" runat="server" class="panel panel3">
        <asp:Label ID="Label3" runat="server" Text="Label" >Panel 3</asp:Label>
    </asp:Panel>

    <script type="text/javascript">
        function showHide() {
            $(".panel").hide();//hide all panels
            $(".selected").show();//show the selected panel
        }
        $(document).ready(function () {
            showHide();//show the default panel
            $(".btn").click(function () {//assign a click handler to the buttons
                $(".selected").removeClass("selected");//remove class from previously selected panel
                switch ($(this).attr("AssociatedPanelClass")) {//assign new panel the selected class
                    case "Panel1":
                        $(".panel1").addClass("selected");
                        break;
                    case "Panel2":
                        $(".panel2").addClass("selected");
                        break;
                    case "Panel3":
                        $(".panel3").addClass("selected");
                        break;
                }
                showHide();//hide and display selected
                return false;//return false to avoid a postback
            });
        });
    </script>

如何在单个页面上的按钮上应用面板

2 个答案: