How I can select a specific tab according to page url in MDB

Topic: How I can select a specific tab according to page url in MDB5 standard?

Otabek Sadiridinov asked 4 years ago

0 0

Expected behavior: Open a tab according to the hash comes after page address url.

For instance: https://mywebsite.com/about.html#v-how-to-tab. And it just should open the tab with v-how-to-tab id.

Actual behavior: Now it just opens the first or the .active class tab.

Resources (screenshots, code snippets etc.): Just, I have no any screenshots....

Add comment

Grzegorz Bujański answered 4 years ago

0 0 Best answer

By default, this option is not supported. You need to add extra js code to handle this. Use window.location.hash for this purpose. You can do it like this:

if (location.hash === "#my-hash") {
  const triggerEl = document.querySelector('a[href="#my-hash"]');

  if (triggerEl) {
    let instance = mdb.Tab.getInstance(triggerEl)

    if (!instance) {
      instance = new mdb.Tab(triggerEl);
    }

    instance.show();
  }
}

Add comment