выбор и загрузка вкладки jquery программно

Question

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

$tabs.tabs('select', 0); 

Однако, происходит то, что он просто выбирает его, а не загружает (эта вкладка загружается через ajax). Интересно, что когда я выбираю другую вкладку, а затем снова возвращаюсь к первой вкладке, она нормально загружается.

Answer 1

Я просто отвечаю на этот вопрос, чтобы избежать путаницы с устаревшими функциями.

Большинство ответов были правильными на момент вопроса, но большинство из них не использовались в новом API.

попробуйте следующий код, если вы используете новый API.

$(function() { 
    $( "#tabs" ).tabs(); 
    $( "#tabs" ).tabs( "option", "active", 2 ); 
});

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

http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method

Answer 2

Вы пытались указать выбранную вкладку во время инициализации:

var $tabs = $('.selector').tabs({ selected: 0 });

После инициализации вы можете сделать это для программного выбора вкладки:

$tabs.tabs('option', 'selected', 0);

РЕДАКТИРОВАТЬ: Это прекрасно работает для меня:

var $tabs = jQuery("#tabDiv > ul").tabs( { selected: null } );
$tabs.tabs("select", 0);

Answer 3

У меня была такая же проблема раньше. Решение, которое я имел, вызывало tabs () два раза; один раз без параметров; один раз с опцией выбора:

Например.

$("#tabs").tabs();
$("#tabs").tabs('select', 2);

Answer 4

Если ничего не работает, вот небольшая хитрость:

Вы можете использовать добавление и удаление классов CSS из jquery, как показано ниже:

// Firstly, remove the "active" class from div panel and <li> tag
$('#firstTab, #firstTabDiv').removeClass('active');
Also, remove the "in" class from div tag in which your panel resides
$('#firstTabDiv').removeClass('in');

Then add same class which you removed in the div and panel in which you want 
to get automatically select
$("#thirdTab, #thirdTabDiv").addClass('active');
$("#thirdTabDiv").addClass('in');

<li id='firstTab' class="active">
    <a href="#firstTabDiv" data-toggle="tab">
        First Tab
    </a>
</li>
<li id='secondTab' class="active">
    <a href="#secondTabDiv" data-toggle="tab">
        Second Tab
    </a>
</li>
<li id='thirdTab' class="active">
    <a href="#thirdTabDiv" data-toggle="tab">
        Third Tab
    </a>
</li>

Таким образом, вы сможете автоматически отображать вкладку при загрузке.

Answer 5

Предполагается, что вы использовали демонстрационную версию со страницы вкладок Jquery (http://jqueryui.com/tabs/#default).. Вы можете легко выбрать вкладку, нажав на привязку. Просто найдите тег привязки, основанный на его имени вкладки, например ...

$('a[href=#tabs-1]').click(); //selects the first tab

Answer 6

Вы должны быть в состоянии звонить:

$tabs.tabs('load', 0);

после выбора для загрузки данных.

Answer 7

Не забудьте поместить его в $ (document) .ready (function () {;}); построить.

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