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

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

50 голосов
/ 23 февраля 2009

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

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

84 голосов
/ 10 января 2011

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

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
33 голосов
/ 08 апреля 2012

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

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

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

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

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

26 голосов
/ 14 февраля 2013 
$('#tabs').tabs('select', index);

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

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

  $('#tabs').tabs({ active: index });
12 голосов
/ 23 февраля 2009

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

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);
6 голосов
/ 22 апреля 2012

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

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
5 голосов
/ 09 декабря 2011

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

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>
3 голосов
/ 26 марта 2014

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

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

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

$('#gtabs').tabs({ active: index });
3 голосов
/ 19 января 2012

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

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

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

3 голосов
/ 01 мая 2010

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

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

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

Вы можете видеть, что я использовал скрытое поле на странице, чтобы убедиться, что переменная перемещена из одной функции в другую.

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

1 голос
/ 23 марта 2012

Вот пример кода, чтобы получить выбранную вкладку по имени. Я надеюсь, что это поможет вам найти решение 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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...