使用jQuery的mdc-tab-bar中的活动选项卡导航

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>