Принудительно выберите вкладку jQuery-ui-tab по умолчанию

На данный момент у меня есть 2 отдельные функции, которые создают вкладки в пользовательском интерфейсе вкладок jquery. Кажется немного случайным, какая вкладка, сгенерированная из этих двух функций, оказывается вкладкой, которая отображается по умолчанию.

Например, если function tabs_a создает 4 вкладки, а function tabs_b создает еще 4 вкладки, либо первая вкладка из tabs_a отображается как вкладка по умолчанию, либо первая вкладка из tabs_b отображается по умолчанию.

Как выбрать автоматическое отображение/выбор конкретной вкладки после того, как обе функции завершили загрузку/создание вкладок?

Например, если функция tabs_a создает:

tab_a_1
tab_a_2
tab_a_3
tab_a_4

и tabs_b создает:

tab_b_1
tab_b_2
tab_b_3
tab_b_4

на данный момент tab_a_1 или tab_b_1 будут выбраны по умолчанию, и кажется случайным, какой из этих двух будет выбран по умолчанию.

Как, например, заставить tab_b_3 выбираться по умолчанию?


jquery jquery-ui jquery-selectors jquery-ui-tabs jquery-tabs
person oshirowanen    schedule 09.07.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

После того, как вкладки созданы, вы можете принудительно вызвать следующие

$("#tabs").tabs('select', "#tab_b_3");

Здесь #tabs — это идентификатор div, для которого вы вызвали функцию .tabs().

person U.P    schedule 09.07.2012

arrow_upward
0
arrow_downward

Имейте в виду, что метод select был удален из пользовательского интерфейса jQuery в версии 1.9. Чтобы выполнить то, что вы хотите сделать, просто используйте опцию «активный», чтобы установить активную вкладку:

$('#tab_b').tabs({ active: true });

OR

$('#tab_b').tabs('option', 'active', true);
person tigerclaw    schedule 16.01.2014
comment
Похоже, что пользовательский интерфейс jQuery обновил API для активного, поэтому он должен быть логическим: $('#tab_b').tabs({ active: true }); - person tigerclaw; 28.07.2020

arrow_upward
-1
arrow_downward

После создания вкладок.

//принудительно выбрать вкладку
$("#tab_b").tabs("select", "tab_b_2");

Проверьте это здесь http://jsfiddle.net/75XFM/3/

Или проверьте код ниже:

<script type="text/javascript">
$("#tab_a").tabs();
$("#tab_b").tabs();
//force select the tab  
$("#tab_b").tabs("select", "tab_b_2");
</script> 


<div id="tab_a">
    <ul>
        <li><a href="#tab_a_1">TabA1</a>

        </li>
        <li><a href="#tab_a_2">TabA2</a>

        </li>
        <li><a href="#tab_a_3">TabA3</a>

        </li>
    </ul>
    <div id="tab_a_1">I'm Tab A1</div>
    <div id="tab_a_2">I'm Tab A2</div>
    <div id="tab_a_3">I'm Tab A3</div>
</div>
<div id="tab_b">
    <ul>
        <li><a href="#tab_b_1">TabA1</a>

        </li>
        <li><a href="#tab_b_2">TabA2</a>

        </li>
        <li><a href="#tab_b_3">TabA3</a>

        </li>
    </ul>
    <div id="tab_b_1">I'm Tab A1</div>
    <div id="tab_b_2">I'm Tab A2</div>
    <div id="tab_b_3">I'm Tab A3</div>
</div>
person Redhot Lastname    schedule 02.04.2013
comment
Не работает в 2020 году. :-(. Не работает и скрипка. - person HirsuteJim; 23.07.2020