Topic: How activate individual tabs via JavaScript
If I try your code here: MDB Tabs API doc I get an null object trying to get the tab instance for the tabs except the first. So I cannot invoke che show() method.
My html code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- Regular MDB theme -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<body data-mdb-theme="light">
<!-- Start your project here-->
<div class="container my-5">
<button class="btn btn-primary mb-3" id="bTest">Test for tab object retrival</button>
<!-- Tabs navs -->
<ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a data-mdb-tab-init class="nav-link active" id="ex1-tab-1" href="#ex1-tabs-1" role="tab"
aria-controls="ex1-tabs-1" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a data-mdb-tab-init class="nav-link" id="ex1-tab-2" href="#ex1-tabs-2" role="tab" aria-controls="ex1-tabs-2"
aria-selected="false">Tab 2</a>
</li>
<li class="nav-item" role="presentation">
<a data-mdb-tab-init class="nav-link" id="ex1-tab-3" href="#ex1-tabs-3" role="tab" aria-controls="ex1-tabs-3"
aria-selected="false">Tab 3</a>
</li>
</ul>
<!-- Tabs navs -->
<!-- Tabs content -->
<div class="tab-content" id="ex1-content">
<div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
Tab 1 content
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
Tab 2 content
</div>
<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
Tab 3 content
</div>
</div>
<!-- Tabs content -->
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.umd.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript" src="js/clkLib.js"></script>
</body>
</html>
My JS script is:
function selectTabTest() {
console.log("Begin test");
const tabLinksContainer = document.getElementById("ex1");
const tabLinks = tabLinksContainer.querySelectorAll("a");
tabLinks.forEach ((tabLink, index) => {
console.log(tabLink.innerHTML);
console.log("Object: "+mdb.Tab.getInstance(tabLink));
});
}
window.onload = function() {
document.getElementById("bTest").onclick = selectTabTest;
};
The console result is:
clkLib.js:6 Tab 1
clkLib.js:7 Object: [object Object]
clkLib.js:6 Tab 2
clkLib.js:7 Object: null
clkLib.js:6 Tab 3
clkLib.js:7 Object: null
Why cannot get tab2 and tab3 instance?
Ok I created a snippet for better testing, and found this solution: you need to create on-the-fly the missing object in order to programmatically select a tab on page loaded (i.e. restoring from localStorage a previous status). So the javascript is:
function selectTabTest() {
console.log("Begin test");
const tabLinksContainer = document.getElementById("ex1");
const tabLinks = tabLinksContainer.querySelectorAll("a");
tabLinks.forEach ((tabLink, index) => {
console.log(tabLink.innerHTML);
var oTab=mdb.Tab.getInstance(tabLink);
if (!oTab) {
oTab = new mdb.Tab(tabLink);
console.log("tab created");
}
console.log("Object: "+mdb.Tab.getInstance(tabLink));
if (index==2) {
mdb.Tab.getInstance(tabLink).show();
}
});
}
window.onload = function() {
document.getElementById("bTest").onclick = selectTabTest;
};
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 8.0.0
- Device: PC
- Browser: Edge
- OS: Windows11
- Provided sample code: No
- Provided link: Yes