Показать разные активные вкладки Bootstrap в зависимости от разрешения

Question

Есть ли способ начать с одного активного tab-pane для разрешения рабочего стола, но с другим для всего ниже 992px (mobile)?

Так что у меня что-то вроде:

<div class="tab-pane fade in active" id="tab_1"> 
    something 
</div> 
<div class="tab-pane" id="tab_2"> 
    something else 
</div> 

Теперь я предпочел бы иметь классы .in и .active в tab_2 вместо tab_1, когда разрешение ниже, чем 992px.

Answer 1

Да, конечно.

С помощью DOM классы CSS доступны для редактирования. В вашем случае, пока размер окна может быть обнаружен динамически, классы .fade и .in будут размещены так, как ожидалось.

Вот фрагмент кода с помощью JQuery:

$(document).ready(function() { 
    function changeTab() { 
     if ($(window).width()< 992) { 
      $("#tab_1").removeClass("fade in"); 
      $("#tab_2").addClass("fade in"); 
     }else{ 
      $("#tab_1").addClass("fade in"); 
      $("#tab_2").removeClass("fade in"); 
     } 
    } 
    changeTab(); 

    // Bind the function, it will be executed once window is resized. 
    $(window).resize(changeTab); 
}); 

Answer 2

У вас может быть отдельная панель вкладок, которая использовалась для всех разрешений, но содержимое этой панели зависит от разрешения, поэтому отображается только правильный.

(Не уверен, что если я истолковал ваш вопрос правильно ...)