jquery 选项卡标签上的单选按钮选择单击

Question

我这里有一个简单的工作（ASP.NET）场景： 3 个 asp:RadioButtons，每个都有 OnCheckedChanged 事件，该事件将更新 asp:gridview。

但现在，我想为每个单选按钮选择添加一些描述，我认为将它们嵌入 JQuery UI 选项卡中是个好主意，如下所示：

<div id="tabs">
<ul>
  <li><a href="#tabs-1"> 
       <asp:RadioButton  ID="RadioButton1" runat="server" Text="option1"  Checked="True"
        AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /> </a></li>
  <li><a href="#tabs-2">
       <asp:RadioButton ID="RadioButton2" runat="server" Text="option2"
        AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /></a></li>
  <li><a href="#tabs-3">
       <asp:RadioButton  ID="RadioButton3" runat="server" Text="option3"
       AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /></a></li>
 </ul>
 <div id="tabs-1"> <p>  content1</p>   </div>
 <div id="tabs-2"> <p>  content2</p>   </div>
 <div id="tabs-3"> <p>  content3</p>   </div>
 </div>

jquery 是

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
</script>

我希望在切换后选择每个选项卡的相应单选按钮到该选项卡（通过单击该选项卡内的任意位置） 我不知道如何通过 JQuery 或 JavaScript 或任何其他建议来做到这一点。 请帮助我

生成的 HTML 源代码：

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">
                            <input type="radio" checked="checked" value="RadioButtonCart" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonCart"/><label for="ctl00_ContentPlaceHolder1_RadioButtonCart">option1</label></a></li>
                        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">
                            <span style="color: Green;"><input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonShetab\',\'\')', 0)" value="RadioButtonShetab" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonShetab"/><label for="ctl00_ContentPlaceHolder1_RadioButtonShetab">option2</label></span></a></li>
                        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">
                            <input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonFish\',\'\')', 0)" value="RadioButtonFish" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonFish"/><label for="ctl00_ContentPlaceHolder1_RadioButtonFish">option3</label></a></li>
                    </ul>
                    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                        <p>                               content1</p>
                    </div>
                    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                        <p>                              content2                            </p>

                    </div>
                    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                        <p>                            content3                            </p>
                    </div>

                </div>

---

好的，感谢 CraigF 帮助我解决了 2 个添加问题 id 到像 id="tabsA-1" 这样的锚点，并使用 $("#aspnetForm").submit() 模拟 OnCheckedChanged="RadioButton_CheckedChanged" 的回发；

    <script type="text/javascript">
    $(document).ready(function() {
        $("#tabsA-1").click(function() {
        $("#<%=RadioButtonCart.ClientID %>").attr("checked", "checked");
        $("#aspnetForm").submit();
        });
    }); 
</script>

我只需要找到一种方法在回发后选择正确的选项卡，我的问题就解决了。

感谢 CraigF 再次

，这是在 asp.net 的帮助下选择正确选项卡的最后一部分，

  <script type="text/javascript">
    $(function() {
        var $tabs = $("#tabs").tabs();
        $tabs.tabs('select', '<%= selectedTabIndex %>');

    });
</script>

其中 selectedTabIndex 是 code_behind 中的公共字符串变量，我在 page_load 中更新其值。 一个有趣的问题是，JQuery 中的 .tabs( 'select' , index ) 并不是像官方网站所说的那样从零开始选项卡索引，而是从 1 开始。

Answer 1

使用 JQuery 向 div 添加点击事件。然后只需编写一个函数（Jquery）来重新选择单选按钮（这将触发单选按钮的服务器端回调）