在aspx頁面顯示div與JavaScript單選按鈕

我想顯示包含通過單選按鈕事件的div。我試着用JavaScript來做到這一點：在aspx頁面顯示div與JavaScript單選按鈕

<h2 style="text-align:center; color:aquamarine"><b>What would you like to do??</b></h2> 
    <asp:RadioButtonList ID="radioButtonList" runat="server"> 
     <asp:ListItem Text="Ask us" Value="1" Selected="False" /> 
     <asp:ListItem Text="Update Player" Value="2" Selected="False" /> 
     <asp:ListItem Text="Games" Value="3" Selected="False" /> 
    </asp:RadioButtonList> 
    <br /><br /><br /> 


    <div name="askUsdiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="askUsPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="updateInfoDiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="updatesPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="gamesDiv" runat="server" visible="false"> 
     <asp:Panel ID="GamesPanel" runat="server" /> 
    </div>

和ASPX頁面的HTML看起來像這樣 -

<h2 style="text-align:center; color:aquamarine"><b>What would you like to do??</b></h2> 
    <asp:RadioButtonList ID="radioButtonList" runat="server"> 
     <asp:ListItem Text="Ask us" Value="1" Selected="False" /> 
     <asp:ListItem Text="Update Player" Value="2" Selected="False" /> 
     <asp:ListItem Text="Games" Value="3" Selected="False" /> 
    </asp:RadioButtonList> 
    <br /><br /><br /> 


    <div name="askUsdiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="askUsPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="updateInfoDiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="updatesPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="gamesDiv" runat="server" visible="false"> 
     <asp:Panel ID="GamesPanel" runat="server" /> 
    </div>

我也試着做這個轉播服務器端：

<asp:RadioButtonList ID="radioButtonList" runat="server" OnSelectedIndexChanged="radioButtonList_SelectedIndexChanged"> 
    <asp:ListItem Text="Ask us" Value="1" Selected="False" /> 
    <asp:ListItem Text="Update Player" Value="2" Selected="False" /> 
    <asp:ListItem Text="Games" Value="3" Selected="False" /> 
</asp:RadioButtonList> 
<br /><br /><br />

和我的c＃代碼與if語句在事件內部。

沒有表格這個選項正在工作。

來源

2016-08-19 Dana S

我的服務器側：的

–

下面是一個非常簡單的，純粹的客戶端使用jQuery溶液：

<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <style type="text/css"> 
     .choiceDiv 
     { 
      display:none; 
      border:2px solid red; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      $(".rad").click(function() { 
       var div = $(this).data("div"); 
       $(".choiceDiv").hide(); 

       if ($(this).is(':checked')) 
        $("#" + div).fadeIn('slow'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <input type="radio" class="rad" name="rad" data-div="askUsdiv" />Ask Us<br /> 
     <input type="radio" class="rad" name="rad" data-div="updateInfoDiv" />Update Player<br /> 
     <input type="radio" class="rad" name="rad" data-div="gamesDiv" />Games<br /> 
     <div id="askUsdiv" class="choiceDiv"> 
      <asp:Panel runat="server" ID="askUsPanel"> 
       Ask Us 
      </asp:Panel> 
     </div> 
     <div id="updateInfoDiv" class="choiceDiv"> 
      <asp:Panel runat="server" ID="updatesPanel"> 
       Update Player 
      </asp:Panel> 
     </div> 
     <div id="gamesDiv" class="choiceDiv"> 
      <asp:Panel ID="GamesPanel" runat="server"> 
       Games 
      </asp:Panel> 
     </div> 
    </form> 
</body>

來源

2016-08-20 14:39:33

在aspx頁面顯示div與JavaScript單選按鈕

回答

相關問題