jqueryjquery-uitabs

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

просмотры: 121.2K

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

<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

Источник

Ответов (15)

Решение

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

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
Источник

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

Источник

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

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>
Источник

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

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

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

Источник

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

<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").tabs("select", "#sample-tab-1");

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

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

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

Источник

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

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
Источник
$('#tabs').tabs('select', index);

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

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

  $('#tabs').tabs({ active: index });
Источник

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

<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 версии 1.10.0

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

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

$('#gtabs').tabs({ active: index });
Источник

У меня возникли проблемы с получением каких-либо ответов, поскольку они основывались на более старых версиях пользовательского интерфейса JQuery. Мы используем 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");
    });
Источник

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

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

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

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

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

$(this).tabs({ active: $('a[href="#tab-101"]').parent().index() });
Источник
$('#tabs a[href="#sample-tab-1"]').click();

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

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

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

$('#tab1').click();
Источник

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

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);
Источник

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

Источник