Question

我正在尝试显示包含via单选按钮事件的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>

我也试过这个ob服务器端：

<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 radiobutton显示div

1 个答案: