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

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

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

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

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

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

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

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

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

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

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

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

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

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

Только этот код реально работает!

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

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

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>

Единственный практический способ получить нулевой индекс ваших вкладок — пройтись по каждому из элементов, составляющих набор вкладок (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 1.8, поэтому я использовал идентифицированный индекс из моего первого прохода для инициализации набора вкладок. с выбранной нужной вкладкой.

Следующая часть работала для меня

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

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

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

<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' does not support in jquery ui version 1.10.0

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

альтернативное решение: используйте «активный»:

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

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

Ответ @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 теперь поддерживает вызов «выбрать» с помощью селектора ID/HREF вкладки, но при создании вкладок параметр «выбрано» по-прежнему поддерживает только числовой индекс.

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

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

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

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

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

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

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

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

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

$(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() });

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

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