選擇選項卡1.10.0

Question

之前jQuery UI的1.10.0我曾經間接選擇這樣的標籤：

$("#tabs").tabs("select", 5); 

或

$("#tabs").tabs("select", "tab6"); 

現在，使用相同的代碼，使用jQuery UI 1.10.0，你會得到一個錯誤，說有「沒有這樣的方法'選擇'選項卡小部件實例「。

我改爲使用「選項」「活動」這樣的代碼：

$("#tabs").tabs("option","active", 5); 

但是，它看起來像我可以只使用索引。通過ID選擇不再有效。 因此，而不是像這樣使用的ID（沒有工作）：

$("#tabs").tabs("option","active", "tab6"); 

你必須做這樣的：

var idx = $('#tabs a[href="#tab6"]').parent().index(); 
$("#tabs").tabs("option", "active", idx); 

，或者在一個較短的形式

$("#tabs").tabs("option", "active", $("#tab6").parent().index()); 

我讀了「更新日誌」（http://jqueryui.com/changelog/1.10.0/），但我沒有看到有關此更改的任何內容。

是否有另一種方式在jQuery UI 1.10.0按名稱選擇選項卡？

我創建這裏誰想嘗試演示...

http://jsbin.com/ojufej/1

Answer 1

我結束了使用此（參見實施例）：

http://jsfiddle.net/AzSUS/

基本上，我加入這些功能

$.fn.tabIndex = function() { 
    return $(this).parent().find(this).index() - 1; 
}; 
$.fn.selectTabByID = function (tabID) { 
    $(this).tabs("option", "active", $('#' + tabID).tabIndex()); 
}; 
$.fn.selectTabByIndex = function (tabIndex) { 
    $(this).tabs("option", "active", tabIndex); 
}; 

答使用它們是這樣的：

$("#tabs").selectTabByIndex(0); 

$("#tabs").selectTabByID('tab2'); 

正如你將看到在我的例子的HTML部分...

<div id="tabs"> 
    <ul> 
    <li><a href="#tab1">[0] #tab1</a></li> 
    <li><a href="#tab2">[1] #tab2</a></li> 
    <li><a href="#tab3">[2] #tab3</a></li> 
    <li><a href="#tab4">[3] #tab4</a></li> 
    </ul> 
    <div id="tab1">Tab 1 Content</div> 
    <div id="tab2">Tab 2 Content</div> 
    <div id="tab3">Tab 3 Content</div> 
    <div id="tab4">Tab 4 Content</div> 
</div> 

...我有一個非常簡單，定義良好的標籤結構。

「真正的」應用程序包含3個級別的標籤

見這個例子與2級：

http://jsfiddle.net/vgaTP/

，我就不清楚了另一件事是這樣的：我不想觸發選項卡上的「點擊」，我只想「切換」到該選項卡，無需點擊。 對我來說，「點擊」事件會加載一個標籤的內容，而且我不想在每次「選擇」一個標籤頁時加載內容。

Answer 2

jQuery的deprecated the select method in v.1.9

的select方法，取而代之的只是更新活動選項被廢棄了。您應該調用select方法，並調用option方法來更改活動選項。

---

In v.1.10 they completely removed it：

移除：選擇方法。 （#7156，7cf2719）

---

我能得到通過名稱選擇一個選項卡是使用href屬性選擇和trigger方法最接近的一次。

$("[href='#tab6']").trigger("click"); 

演示：http://jsfiddle.net/QRUGM/

---

原來select方法做了一些similar：

this.anchors.eq(index).trigger(this.options.event + this.eventNamespace); 

只有他們通過索引而不是名稱選擇的選項卡。

Answer 3

如果您已經有大量引用這些折舊功能的遺留代碼，並且遷移是一件頭痛的事情，那麼請創建一個橋接舊/新方法的向後兼容性模塊。

$.extend(true, $.ui.tabs.prototype, { 
    select: function (indexOrId) { 
     if (typeof indexOrId == "integer") 
      this.option("select", indexOrId); 
     else 
      $("[href='#"+ indexOrId +"']", this.element).click(); 
    } 
    // other methods.. 
}); 

Answer 4

我用上面的$（「[href ='＃tab6']」）。trigger（「click」）;由Ayman Safadi發佈（謝謝！）和一個隱藏的領域，其作品很棒。 大了起來爲這個職位也http://geekswithblogs.net/dotNETvinz/archive/2010/07/09/jquery-tab-retain-selected-tab-across-postbacks-in-asp.net.aspx它與Aymens答案組合幫助我得到這個最終的答案:)感謝所有

<script type="text/javascript"> 
    $(function() { 

     var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val(); 

     if (currTab == 0) { 
      $("[href='#tab_1_1']").trigger("click"); 
     } 

     if (currTab == 1) { 
      $("[href='#tab_1_2']").trigger("click"); 
     } 

     if (currTab == 2) { 
      $("[href='#tab_1_3']").trigger("click"); 
     } 

     if (currTab == 3) { 
      $("[href='#tab_1_4']").trigger("click"); 
     } 

    }); 
</script> 

只是爲了還注意到，下面的代碼做的工作太多，但把我的標籤爲藍色一些原因

$('#tabs').tabs(); 
        var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val(); 
        $('#tabs').tabs("option", "active", currTab); 

Answer 5

真的很容易;

$("#tabs").tabs("option", "active", $("#tabs").find("#tab6").index()-1); 

凡＃tab6是你要選擇的選項卡和#tabs的ID是你的標籤控件的ID。