Активная навигация по вкладкам в mdc-tab-bar с использованием jQuery

Question

У меня есть класс вкладок навигации с двумя вкладками с материалом, и я хочу показать вторую вкладку.

Я пробовал с jQuery, но это не работает для меня.

Здесь мойHTML:

<div class="mdc-tab-bar" role="tablist">
   <div class="mdc-tab-scroller">
      <div class="mdc-tab-scroller__scroll-area">
         <div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
            <button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
            <span class="mdc-tab__content">
            <span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
            </span>
            <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
            </span>
            <span class="mdc-tab__ripple"></span>
            </button>
            <button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
            <span class="mdc-tab__content">
            <span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
            </span>
            <span class="mdc-tab-indicator">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
            </span>
            <span class="mdc-tab__ripple"></span>
            </button>
         </div>
      </div>
   </div>
</div>


<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
   <div class="tab-pane active mt-3" id="nav_tns">
      <div class="mdc-card demo-card">
      </div>
      <div class="mdc-card demo-card mt-3">
      </div>
   </div>
   <div class="tab-pane fade mt-3" style="" id="nav_act">
      <div class="mdc-card demo-card">
      </div>
   </div>
</div>

Вот мой код Jquery:

activaTab('nav_act');


function activaTab(tab) {
$('.nav-tabs [href="#' + tab + '"]').tab('show');
};

Итак, как я могу решить эту проблему с помощью jquery или путем добавления определенного класса, например show active, в загрузчик.

Answer 1

Обязательно добавьте нужные библиотеки.Как видно из этого примера, вкладка по умолчанию - вторая.

activaTab('nav_act');

function activaTab(tab) {
  $('.nav-tabs [href="#' + tab + '"]').tab('show');
};

.show {
  background-color: red!important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
<div class="mdc-tab-bar" role="tablist">
  <div class="mdc-tab-scroller">
    <div class="mdc-tab-scroller__scroll-area">
      <div class="mdc-tab-scroller__scroll-content nav nav-tabs" id="exTabs">
        <button class="nav-item nav-link mdc-tab mdc-tab--active" id="nav_tns_tab" data-toggle="tab" href="#nav_tns" role="tab" aria-selected="true" tabindex="0" style="border:0px">
            <span class="mdc-tab__content">
            <span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">TNS</span>
            </span>
            <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
            </span>
            <span class="mdc-tab__ripple"></span>
        </button>
        <button class="nav-item nav-link mdc-tab" id="nav_act_tab" data-toggle="tab" href="#nav_act" role="tab" aria-selected="false" tabindex="0" style="border:0px">
            <span class="mdc-tab__content">
            <span class="mdc-tab__text-label text-uppercase tab-mdc-title details-text-style" style="font-size: 14px">Activite</span>
            </span>
            <span class="mdc-tab-indicator">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
            </span>
            <span class="mdc-tab__ripple"></span>
         </button>
      </div>
    </div>
  </div>
</div>


<div class="tab-content mt-4" style="display: block;position: relative;width: 100%;margin-bottom: 56px;">
  <div class="tab-pane active mt-3" id="nav_tns">
    <div class="mdc-card demo-card">
    </div>
    <div class="mdc-card demo-card mt-3">
    </div>
  </div>
  <div class="tab-pane fade mt-3" style="" id="nav_act">
    <div class="mdc-card demo-card">
    </div>
  </div>
</div>