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）以重新選擇單選按鈕（這將觸發單選按鈕的服務器端回調）