JQuery - поддерживать активный класс между мобильными и настольными вкладками выбора контента - Включает CodePen ссылке

Question

EDIT: Смотрите этот код ручку для примера того, что случилось: http://codepen.io/sdejaneiro/pen/MKZeov?editors=1010

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

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

Да, я знаю, что это очень странная идея - переход от закладки вкладки ul к настройке аккордеона Div не рекомендуется. Однако это не мой призыв. Опять же, возможно, то, что я прошу, невозможно, учитывая этот сценарий? Если это так, то я в порядке.

Это то, что я до сих пор, но он не поддерживает активное состояние с рабочего стола на мобильный и мобильный телефон на рабочий стол:

(function($) { 

    $(document).ready(function() { 
    // tabbed content on product detail page 
    if ($('.tabs').length) { 
     $('.tabs li').each(function(i, n) { 
     $(n).bind('click', function(e) { 
      e.preventDefault(); 
      $('.tabs .active').removeClass('active'); 
      $($('.tabs li')[i]).addClass('active'); 

      //call to toggleTab function with class of current .tab li item 

     }); 
     }); 
    } 

    //mobile SDS tab navigation 
    $('.tab-link-wrap').each(function(i, n) { 
     $(n).bind('click', function(e) { 
     e.preventDefault(); 
     $('.activeLink').removeClass('activeLink'); 
     $($('.tab-link-wrap')[i]).addClass('activeLink'); 

     //call to toggleTab function with class of current tab-link-wrap div 
     }); 
    }); 
    }); 

    //Toggle the active state of the tabs from mobile -> desktop and desktop->mobile 
    function toggleTab(num) { 
    $(".tab-link-wrap").find("#" + num).toggleClass("activeLink"); 
    $(".tabs").find("#" + num).toggleClass("active"); 
    } 

}(jQuery)); 

Answer 1

Вы можете добавить атрибут data-id="1" , 2 , 3 данных для каждого пункта меню, вкладки, так что вы знаете, какой из них была нажата, и внести изменения в обоих меню

например

<li><a href="#" data-id="1" class="1 tab-link">Tab A</a></li> 

<div data-id="1" class="1 tab-link-wrap"> 

код

$(".tab-link, .tab-link-wrap").on("click", function() { 

var id = $(this).attr("data-id"); 

$('.tabs .active').removeClass('active'); 

$('.tab-link[data-id="'+id+'"]').closest("li").addClass('active'); 

$('.activeLink').removeClass('activeLink'); 

$('.tab-link-wrap[data-id="'+id+'"]').addClass('activeLink'); 

}) 

Demo

Answer 2

Они разные элементы, так что вы должны добавить классы для активных ссылок в обоих случаях:

$('.tabs .active').removeClass('active'); 
$('.tab-link-wrap').removeClass('activeLink'); 
$($('.tab-link-wrap')[i]).addClass('activeLink'); 
$($('.tabs li')[i]).addClass('active'); 

Полный код (http://codepen.io/anon/pen/Qyzdmd?editors=1010):

(function($) { 

    $(document).ready(function() { 
    // tabbed content on product detail page 
    if ($('.tabs').length) { 
     $('.tabs li').each(function(i, n) { 
     $(n).bind('click', function(e) { 
      e.preventDefault(); 
      $('.tabs .active').removeClass('active'); 
      $('.tab-link-wrap').removeClass('activeLink'); 
      $($('.tab-link-wrap')[i]).addClass('activeLink'); 
      $($('.tabs li')[i]).addClass('active'); 

      //call to toggleTab function with class of current .tab li item 

     }); 
     }); 
    } 

    //mobile SDS tab navigation 
    $('.tab-link-wrap').each(function(i, n) { 
     $(n).bind('click', function(e) { 
     e.preventDefault(); 
     **$('.tabs .active').removeClass('active'); 
     $('.tab-link-wrap').removeClass('activeLink'); 
     $($('.tab-link-wrap')[i]).addClass('activeLink'); 
     $($('.tabs li')[i]).addClass('active');** 

     //call to toggleTab function with class of current tab-link-wrap div 
     }); 
    }); 
    }); 

    //Toggle the active state of the tabs from mobile -> desktop and desktop->mobile 
    function toggleTab(num) { 
    $(".tab-link-wrap").find("#" + num).toggleClass("activeLink"); 
    $(".tabs").find("#" + num).toggleClass("active"); 
    } 

}(jQuery));