Выбрать вкладку по имени в jQuery UI 1.10.0

Ответ 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);
};

Ans используют их так:

$("#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 уровня вкладок

См. этот пример с двумя уровнями:

http://jsfiddle.net/vgaTP/

Еще одна вещь, о которой я не совсем понял, такова: я не хочу запускать "click" на вкладке, я просто хочу "переключиться" на эту вкладку, без щелчка. Для меня событие "click" загружает содержимое вкладки, и я не хочу загружать контент каждый раз, когда я выбираю вкладку.

Ответ 2

jQuery устарел метод select в v.1.9

Метод select устарел, чтобы просто обновить активную опцию. Вы должны заменить все вызовы методу select на вызовы метода option, чтобы изменить активную опцию.

В v.1.10 они полностью удалили его:

Удалено: выберите метод. (# 7156, 7cf2719)

Ближе всего я мог бы выбрать вкладку по имени, используя селектор атрибутов href и метод trigger.

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

Демо: http://jsfiddle.net/QRUGM/

Оригинальный метод select сделал что-то похожее:

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

Только они выбрали вкладку индексом вместо имени.

Ответ 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..
});

Ответ 4

Действительно легко,

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

Где # tab6 - идентификатор закладки, которую вы хотите выбрать, и #tabs - это идентификатор элемента управления вкладкой.

Ответ 5

Я использовал выше $( "[href= '# tab6']" ). trigger ("click"); отправленный Айманом Сафади (спасибо!) вместе со скрытым полем и его работами. Большой для этого поста также http://geekswithblogs.net/dotNETvinz/archive/2010/07/09/jquery-tab-retain-selected-tab-across-postbacks-in-asp.net.aspx, который в сочетании с ответом Айменса помог мне добраться до этого окончательного ответа:) спасибо всем

 <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);