Вкладки пользовательского интерфейса jQuery: таргетинг на динамическую вкладку по ссылке

Question

Недавно я пытался открыть вкладку с помощью этого скрипта:

$('.tofour').click(function() { // bind click event to link
    $tabs.tabs('select', 3); // switch to third tab
    return false;
});

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

В определенных ситуациях у нас будет достаточно данных для:

1. Данные о товаре (# обзор)
2. Технические характеристики (# спецификации)
3. Аксессуары (# аксессуары)
4. Услуги (# услуги)
5. Отзывы клиентов (#reviews)

А в других ситуациях для заполнения двух вкладок будет достаточно данных

1. Данные о товаре (# обзор)
2. Аксессуары (# аксессуары)

Как вы можете себе представить, это создает проблему, так как номер вкладки может измениться; вкладка Спецификация (#specs) может быть либо второй вкладкой, либо первой вкладкой (если Данные продукта не существуют), либо вкладка Спецификации может вообще не существовать.

Итак, в качестве аргумента, допустим, я хочу перейти на вкладку Спецификации. Я думаю, в первую очередь нужно проверить, существует ли div id #specs. Тогда, я думаю, мне нужно создать ссылку, которая будет нацелена на это. Но можно ли указывать идентификатор вместо номера вкладки, как в обычном примере (выше)?

Может кто-нибудь помочь с этим? Мои навыки jQuery, как мне стыдно признаться, довольно плохие.

Заранее благодарю.

Answer 1

Вы можете получить индекс с помощью этого кода, а затем проверить, равен ли он -1 (это означает, что он не существует)

Примечание. Предполагается, что тег для вкладки имеет идентификатор спецификации

var index = $('#tabs a').index($('#specs'));

if (index > -1) {
    $('#tabs').tabs('select', index);
}

Answer 2

Это должно быть хорошо для сценария Вы можете заменить element.id.match('specs') на желаемое состояние

$('.tofour').click(function(evt) {
   $('#tabs a').each(function(index,element){
     if(index != -1 && element.id.match('specs')){
     $('#tabs').tabs('select', index);
     return false;
     }
   });
});

Answer 3

Создайте массив javascript, содержащий идентификатор вкладки в качестве ключа и индекс вкладки в качестве значения:

// if you're using php and the tabs that need to be generated are in a variable called $tabs
// you could work this out in other languages
$count = count($tabs);
for($i=0;$i<=$count;$i++){
    $tab = $tabs[$i];
    echo 'tab_indexes[' . $tab['id'] . '] = ' . $i . ';'; // id as in #specs, etc
}

Затем используйте массив в jQuery:

$('#to_specs').click(function() { // bind click event to link
    $('#tabs').tabs('select', tab_indexes['#specs']); // switch to specs tab
    return false;
});

Answer 4

$("#m").live('click',function(){
    $('#tabs').tabs({ selected: "#tabs-1" });
});

Попробуйте это.Дайте мне знать дальше.