emailoversight priority asked 10 months ago


I have this nav with 2 tabs. By default I am active on the tab1. However, based on a lot of business logic, I want to have the possibility to change to the tab2 via javascript.

Here's the html:

Tab1 Tab2

What I've tried, but none of them worked. a) Javascript const triggerTabList = [].slice.call(document.querySelectorAll('#tab2 a')); triggerTabList.forEach((triggerEl) => { const tabTrigger = new mdb.Tab(triggerEl);

triggerEl.addEventListener('click', (event) => { event.preventDefault(); tabTrigger.show(); }); });

b) jQuery $('#tab2').tab();

c) Methods const someTabTriggerEl = document.querySelector('#tab2'); const tab = new mdb.Tab(someTabTriggerEl) tab.show(); //this line shows error

d) Events const tabEl = document.querySelector('#tab2'); tabEl.addEventListener('shown.mdb.tab', (event) => { event.target; })


Michał Duszak staff answered 10 months ago


Hello, here is an example of how you can do it.

const buttonEl = document.querySelector('#buttonTabTwo')
const tabTwoTriggerEl = document.querySelector('#ex1-tab-2')

buttonEl.addEventListener('click', () => {
  mdb.Tab.getInstance(tabTwoTriggerEl).show();
})

https://mdbootstrap.com/snippets/standard/m-duszak/3596004#js-tab-view

If you still can't get it to work, please tell me exactly what errors occur? Does the example from the snippet work on your project?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No