0

3 つのボタンがあり、ボタン 1 をクリックすると 3 つのパネルが表示され、次にパネル 1 が表示されます。

4

2 に答える 2

0

JavaScriptで簡単にできます。asp.net の方法は次のとおりです。

ボタンはパネルの外に置いてください。

次のように、aspx のすべてのパネルに対してEnableViewStateプロパティをマークします。true

<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;
}
于 2012-12-08T07:13:18.033 に答える
0

これを行うにはいくつかの方法があります。たとえば、以下のコードは、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>
于 2012-12-08T08:13:11.693 に答える