在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单选按钮

回答

相关问题