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中的公共字符串var，我在page_load中更新其值。 一个有趣的问题是，JQuery中的.tabs（'select'，index） 不是官方网站所说的选项卡的从零开始的索引，它从1开始。

Answer 1

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