假华夫饼响应标签屏幕问题

fakewaffle responsive tab screen issue

本文关键字：标签 屏幕 问题 响应      更新时间：2023-09-26

我使用的是fakewaffle响应式标签插件，但是我不明白的是我想在480px而不是768px上做出响应，但是我不能，我怎么能做到呢?

HTML 

<ul class="nav nav-tabs responsive" id="myTab">
    <li class="active"><a href="#home">Home</a>
    </li>
    <li><a href="#profile">Profile</a>
    </li>
    <li><a href="#messages">Messages</a>
    </li>
</ul>
<div class="tab-content responsive">
    <div class="tab-pane active" id="home">...content...</div>
    <div class="tab-pane" id="profile">...content...</div>
    <div class="tab-pane" id="messages">...content...</div>
</div>

JS 

$('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
});
(function ($) {
    fakewaffle.responsiveTabs(['xs', 'sm']);
})(jQuery);

点击查看演示

删除此sm。Sm取768屏

$('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
});
(function ($) {
   var windowSize = $(window).width();
   if(windowSize < 480){
     fakewaffle.responsiveTabs(['xs']);
   }
})(jQuery);

相关文章：