在aspx页面上使用javascript单选按钮显示div

Question

我试图显示通过单选按钮事件包含的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语句的。

没有任何形式的此选项有效。

Answer 1

以下是使用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>

在aspx页面上使用javascript单选按钮显示div

问题描述

1 个解决方案

解决方案1
0 2016-08-20 14:39:33

在aspx页面上使用javascript单选按钮显示div

问题描述

1 个解决方案

解决方案1 0 2016-08-20 14:39:33

解决方案1
0 2016-08-20 14:39:33