ФорумПрограммированиеJavaScript → Табы в табе

Табы в табе

  • developer

    Сообщения: 244 Репутация: N Группа: Кто попало

    Spritz 27 июня 2015 г. 12:21

    Нужно было сделать табы в табе, сделал:

        var tabContainers = $(\'div.tabs > div\'); // получаем массив контейнеров
        var tabContainersModel = $(\'tr.mfa_line\'); // получаем массив контейнеров
        var tabNavigationModel = $(\'ul.tabNavigation_model > li\'); // получаем массив контейнеров
    
        //console.log(tabContainers);
    
        // далее обрабатывается клик по вкладке бренда
        $(\'div.tabs ul.tabNavigation a\').click(function () { 
    
            tabContainers.hide(); // прячем все табы 
            tabNavigationModel.hide(); // прячем все табы моделей
    
            tabContainers.filter(this.hash).show(); // показываем содержимое текущего
            tabNavigationModel.filter(this.hash).show(); // показываем текущие модели
    
            $(\'div.tabs ul.tabNavigation a\').removeClass(\'selected\'); // у всех убираем класс selected
            $(this).addClass(\'selected\'); // текушей вкладке добавляем класс selected
    
            return false;
    
        }).filter(\':first\').click();
    
        // далее обрабатывается клик по вкладке модели
        $(\'div.tabs ul.tabNavigation_model li a\').click(function () { 
    
            tabContainersModel.hide(); // прячем все табы
    
            tabContainersModel.filter(this.hash).show(); // показываем содержимое текущего
    
            $(\'div.tabs ul.tabNavigation_model li a\').removeClass(\'selected\'); // у всех убираем класс selected
            $(this).addClass(\'selected\'); // текушей вкладке добавляем класс selected
    
            return false;
    
        }).filter(\':first\').click();

    Результат на лицо:

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

    Пробовал в

    $(\'div.tabs ul.tabNavigation a\').click(function () { 

    добавить

    tabNavigationModel.filter(\':first\').click();

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

    <ul class="tabNavigation">
            <li id="SEAT"><a href="#SEAT">SEAT</a></li>
            <li id="SKODA"><a href="#SKODA">SKODA</a></li>
            <li id="VW"><a href="#VW">VW</a></li>
    </ul>
    <ul class="tabNavigation_model">
            <li id="SEAT"><a href="#LEON1M1">LEON (1M1)</a></li>
            <li id="SEAT"><a href="#TOLEDOII1M2">TOLEDO II (1M2)</a></li>
            <li id="SKODA"><a href="#OCTAVIA1U2">OCTAVIA (1U2)</a></li>
            <li id="SKODA"><a href="#OCTAVIACombi1U5">OCTAVIA Combi (1U5)</a></li>
            <li id="VW"><a href="#BORA1J2">BORA (1J2)</a></li>
            <li id="VW"><a href="#BORAuniversal1J6">BORA универсал (1J6)</a></li>
            <li id="VW"><a href="#GOLFIV1J1">GOLF IV (1J1)</a></li>
            <li id="VW"><a href="#GOLFIVVariant1J5">GOLF IV Variant (1J5)</a></li>
        </ul>
  • developer

    Сообщения: 244 Репутация: N Группа: Кто попало

    Spritz 27 июня 2015 г. 13:16, спустя 55 минут 47 секунд

    по идее должно срабатывать

    tabNavigationModel.filter(this.hash).filter(\':first\').click();

    но не срабатывает, хотя console.log показывает имеено нужный первый элемент в суб-табе

  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 27 июня 2015 г. 13:20, спустя 3 минуты 42 секунды

    @developer, 2 тебе минимум за то что ID дублируется. ID для JavaScript не должен дублироваться.

    Сапожник без сапог
  • developer

    Сообщения: 244 Репутация: N Группа: Кто попало

    Spritz 27 июня 2015 г. 13:22, спустя 1 минуту 44 секунды

    Ты имеешь ввиду

    filter(this.hash).filter(\':first\')

    ? я это и сам понимаю, бредятину написал, но что делать когда ничего не выходит :)

    Спустя 268 сек.

    tabNavigationModel.filter(this.hash + \':first\').click();

    так тоже не работает

    Спустя 31 сек.

    точнее в console.log работает, а в скрипте нет

  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 27 июня 2015 г. 13:52, спустя 30 минут 10 секунд

    Ты имеешь ввиду

    @developer, да нет же блин, я имею ввиду

    @developer, 2 тебе минимум за то что ID дублируется. ID для JavaScript не должен дублироваться.

    @phpdude,

    Сапожник без сапог
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 июня 2015 г. 13:56, спустя 3 минуты 25 секунд

    bdaBze [codepen.io]

    Вот тебе табы с бесконечной вложенностью.

    Высокоуровневое абстрактное говно

Пожалуйста, авторизуйтесь, чтобы написать комментарий!