jquery - 仅在特定屏幕尺寸上触发选项卡

Question

只有在 iPhone 上查看时才会触发选项卡时遇到一些问题（基本上是 max-wdith:740px）。

我尝试了许多选项，但似乎无法使其正常工作。这是我的基本 jQuery：

---

$('#tab-1, #tab-2, #tab-3').hide();
$('#tab-1').show();
$('ul.mobileTabs li a.mobiletab1').addClass('mobileActive');

$('ul.mobileTabs li a').click(function(){
    $('ul.mobileTabs li').removeClass('mobileActive');
    $(this).parent().addClass('mobileActive');
    var currentTab = $(this).attr('href');
    $('#tab-1, #tab-2, #tab-3').hide();
    $(currentTab).show();
    return false;
});

---

如果有人可以帮助我，那就太好了！

干杯

Answer 1

响应式设计的 iPhone 像素大小为纵向 300 像素和横向 420 像素。

如果您只想为特定浏览器大小运行功能，您可以这样做：

if($(window).width() <= 740) {
   foo();
} else {
   boo();
}

Answer 2

这是 ->$('ul.mobileTabs li').addClass('mobileActive');吗？

$('#tab-1, #tab-2, #tab-3').hide();
$('#tab-1').show();
$('ul.mobileTabs li').addClass('mobileActive');

dom 添加的类“mobileActive”应该是“li”