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

Ответ 1

Я не мог получить предыдущий ответ на работу. Я сделал следующее, чтобы получить индекс вкладки по имени:

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);

Ответ 2

Кажется, что использование id работает так же, как индекс, например просто это будет работать из коробки...

$("#tabs").tabs("select", "#sample-tab-1");

Это хорошо описано в официальных документах :

"Выберите вкладку, как если бы она была нажата. Второй аргумент - это нулевой индекс вкладки, которая будет выбрана , или селектор идентификаторов панель, с которой связана вкладка (идентификатор фрагмента таблицы href, например хэш, указывает на идентификатор панели)."

Я предполагаю, что это было добавлено после того, как этот вопрос был задан и, вероятно, после большинства ответов

Ответ 3

$('#tabs').tabs('select', index); 

Методы `` select 'не поддерживает jquery ui 1.10.0. http://api.jqueryui.com/tabs/

Я использую этот код и работаю правильно:

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

Ответ 4

Вы можете получить индекс вкладки по имени со следующим script:

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);

Ответ 5

Только настоящий код работает!

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');

Ответ 6

Используйте эту функцию:

function uiTabs(i){
    $("#tabs").tabs("option", "selected", i);
}

И используйте следующий код для переключения между вкладками:

<a onclick="uiTabs(0)">Tab 1</a>
<a onclick="uiTabs(1)">Tab 2</a>
<a onclick="uiTabs(2)">Tab 3</a>

Ответ 7

Единственный практический способ получить нулевой индекс ваших вкладок - пройти через каждый из элементов, которые делают tabset (LI > A s) и соответствовать их внутреннему тексту. Возможно, это можно сделать более чистым способом, но вот как я это сделал.

$('#tabs ul li a').each(function(i) {
    if (this.text == 'Two') {$('#reqTab').val(i)}
});

$("#tabs").tabs({
    selected: $('#reqTab').val()
});

Вы можете видеть, что я использовал скрытый < input id = "reqTab" > поле на странице, чтобы переменная переместилась от одной функции к другой.

ПРИМЕЧАНИЕ. Существует немного вариантов выбора вкладок после активации таблеток, похоже, не работает, как рекламируется в jQuery UI 1.8, поэтому я использовал идентифицированный индекс с моего первого прохода, чтобы инициализируйте вкладку с выбранной вкладкой.

Ответ 8

Следующий фрагмент работал у меня

$($("#tabs")[0]).tabs({selected: 1});

Надеюсь, это поможет!

Ответ 9

попробуйте это: вкладка "выбрать" / "активная"

<article id="gtabs">
    <ul>
        <li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li>
        <li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li>
        <li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li>
    </ul>

var index = $('#gtabs a[href="#general-filter-config"]').parent().index();

//`'select' не поддерживается в jquery ui version 1.10.0

$('#gtabs').tabs('select', index);  

альтернативное решение: используйте "active":

$('#gtabs').tabs({ active: index });

Ответ 10

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

Ответ 11

Ответ на @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 за то, что вы меня на правильном пути. Спасибо!

Ответ 12

Вот пример кода, чтобы получить выбранную вкладку по имени. Надеюсь, это поможет вам найти решение ypur:

<html>
<head>
<script type="text/javascript"><!-- Don't forget jquery and jquery ui .js files--></script>
<script type="text/javascript">
   $(document).ready(function(){
     $('#tabs').show();

     // shows the index and tab title selected
     $('#button-id').button().click(function(){
         var selTab = $('#tabs .ui-tabs-selected');
         alert('tab-selected: '+selTab.index()+'-'+ selTab.text());
     });
  });
</script>
</head>
<body>
   <div id="tabs">
      <ul id="tablist">
            <li><a href='forms/form1.html' title="form_1"><span>Form 1</span></a></li>
            <li><a href='forms/form2' title="form_2"><span>Form 2</span></a></li>
      </ul>
   </div>
    <button id="button-id">ClickMe</button>
</body>
</html>

Ответ 13

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

Вот мой скрипт с рабочим кодом: 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");
    });