Переключиться на выбранную вкладку по имени в Jquery-UI Tabs

Question

Если у меня есть три вкладки:

<div id="tabs">
    <ul>
        <li><a href="#sample-tab-1"><span>One</span></a></li>
        <li><a href="#sample-tab-2"><span>Two</span></a></li>
        <li><a href="#sample-tab-3"><span>Three</span></a></li>
    </ul>
</div>

Я бы хотел перейти к # sample-tab-2 по его имени. Я знаю, что могу перейти на вкладку, если знаю, что это номер, но в случае, если я столкнулся, я этого не узнаю.

Примечания: JQuery 1.3.1 / JQuery-UI 1.6rc6

Answer 1

@ Ответ bduke на самом деле работает с небольшим изменением.

var index = $("#tabs>div").index($("#simple-tab-2"));
$("#tabs").tabs("select", index);

Выше предполагается что-то похожее на:

<div id="tabs">
  <ul>
    <li><a href="#simple-tab-0">Tab 0</a></li>
    <li><a href="#simple-tab-1">Tab 1</a></li>
    <li><a href="#simple-tab-2">Tab 2</a></li>
    <li><a href="#simple-tab-3">Tab 3</a></li>
  </ul>
  <div id="simple-tab-0"></div>
  <div id="simple-tab-1"></div>
  <div id="simple-tab-2"></div>
  <div id="simple-tab-3"></div>
</div>

jQueryUI теперь поддерживает вызов «select» с помощью селектора ID / HREF вкладки, но при построении вкладок опция «selected» все еще поддерживает только числовой индекс.

Мой голос отдан bdukes за то, что я на правильном пути. Спасибо!

Answer 2

Если вы изменяете hrefs, вы можете назначить идентификатор для ссылок <a href="#sample-tab-1" id="tab1"><span>One</span></a>, чтобы вы могли найти индекс вкладки по его идентификатору.

Answer 3

Установить определенный индекс вкладки как активный:

$(this).tabs({ active: # }); /* Where # is the tab index. The index count starts at 0 */

Установить последнюю вкладку как активную

$(this).tabs({ active: -1 });

Установить конкретную вкладку по ID:

$(this).tabs({ active: $('a[href="#tab-101"]').parent().index() });

Answer 4

$('#tabs a[href="#sample-tab-1"]').click();

или вы можете назначить идентификатор ссылкам

<a href="#sample-tab-1" id="tab1">span>One</span></a>

чтобы вы могли найти его идентификатор.

$('#tab1').click();

Answer 5

У меня были проблемы с тем, чтобы заставить работать любой из ответов, поскольку они основывались на более старых версиях JQuery UI. Мы используем 1.11.4 ( CDN Reference ).

Вот моя скрипка с рабочим кодом: http://jsfiddle.net/6b0p02um/ В итоге я соединил биты из четырех или пяти разных потоков, чтобы заставить мою работать:

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

    //selects the tab index of the <li> relative to the div it is contained within
    $(".btn_tab3").click(function () {
        $( "#tabs" ).tabs( "option", "active", 2 );
    });         

    //selects the tab by id of the <li>
    $(".btn_tab3_id").click(function () {
      function selectTab(tabName) {
          $("#tabs").tabs("option", "active", $(tabName + "").index());
      }

      selectTab("#li_ui_id_3");
    });