如何在單一頁面上的按鈕上應用面板

Question

有三個按鈕，現在有三個面板，如果我點擊按鈕之一，然後顯示面板一個，如果第二個然後第二個和第三個相同，那麼可能會有什麼成爲那個條件。

Answer 1

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

保持面板外的按鈕。

標記EnableViewState屬性true所有面板上類似的aspx：按鈕處理內部，

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

現在，只是改變有關面板的Visible：

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

在Page_Load方法，添加此物業true和其他false像：

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

Answer 2

有很多方法可以做到這一點。例如，下面的代碼將顯示panel1是否點擊了button1，panel2是否點擊了button2等等。這只是一個快速和骯髒的方法來完成你的要求。

<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>