mdb

by maksam07

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<ul class="nav nav-tabs nav-fill mb-0" id="main-tablist-nav" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="tab-list-button" data-mdb-toggle="tab" href="#tab-list-content" role="tab" aria-controls="tab-list-content" aria-selected="true">
      List
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="tab-import-button" data-mdb-toggle="tab" href="#tab-import-content" role="tab" aria-controls="tab-import-content" aria-selected="false">
      Import
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="tab-export-button" data-mdb-toggle="tab" href="#tab-export-content" role="tab" aria-controls="tab-export-content" aria-selected="false">
      Export
    </a>
  </li>
</ul>

<hr class="my-0"/>

<div class="tab-content" id="main-tablist-content">
  <div class="tab-pane fade mt-3 show active" id="tab-list-content" role="tabpanel" aria-labelledby="tab-list-button">
    Tab 1 content
  </div>

  <div class="tab-pane fade mt-3" id="tab-import-content" role="tabpanel" aria-labelledby="tab-import-button">
    Tab 2 content
  </div>

  <div class="tab-pane fade mt-3" id="tab-export-content" role="tabpanel" aria-labelledby="tab-export-button">
    Tab 3 content
  </div>
</div>

JavaScript

$(document).ready(function () {
    console.log('+++')


    $('a[data-mdb-toggle="tab"]').tab();

    $('a[data-mdb-toggle="tab"]').on('shown.mdb.tab', function (e) {
        console.log('shown.mdb.tab')
    })

    $('a[data-mdb-toggle="tab"]').on('shown.bs.tab', function (e) {
        console.log('shown.bs.tab')
    })

});


const tabEl = document.querySelector('a[data-mdb-toggle="tab"]');
tabEl.addEventListener('shown.mdb.tab', (event) => {
    console.log('shown.mdb.tab no-jq')
})

tabEl.addEventListener('shown.bs.tab', (event) => {
    console.log('shown.bs.tab no-jq')
})