Topic: Nav tab trigger
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 Tab2What 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; })
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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