jQuery - 在移动和桌面内容选择选项卡之间维护活动类 - 包括 CodePen 链接

Question

编辑：有关错误的示例，请参阅此代码笔：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');
})

演示

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