Hey there,
I'm currently working on a project that involves using bootstrap tabs (BS4) within a form.
One of the requirements is to have forward and back buttons for form navigation, and I'd like to leverage BS4's tab('show') functionality for this purpose.
Despite multiple attempts, I'm struggling to make it work even in a proof of concept version. I'm not sure where I might have gone wrong.
I've double-checked all the IDs to ensure they are correctly set and everything matches. So far, everything seems to be in order. There are no errors or warnings in the console log either.
I'm hoping this is just a simple bug on my end and not an issue with Bootstrap itself.
Here's a snippet of the code from my proof of concept:
Contents of my functions.js file:
function activaTab(tab) {
var tabID = '#' + tab;
console.log('You just clicked on a function to activate tab : ' + tabID);
if ($(tabID).length == 0) {
console.log('But I have to inform you of the misfortunate event that the tab ID you want to pick strangely does not exist');
}
$('.nav-tabs a[href="' + tabID + '"]').tab('show'); // Select tab by name
};
Contents of my HTML file:
A very tired mind caused this..
$('.nav-tabs a[href="' + tabID + '"]').tab('show'); // Select tab by name
to be changed in :
$('.nav-pills a[href="' + tabID + '"]').tab('show'); // Select tab by name