My goal is to use an external Hash (#) url link to go & open specifics Bootstrap tabs. I like the same functionality as an html anchors link permitting a link in any pages, emails whatever to go to the right webpage, scroll to view &, in this case, open the related tab.
This is a working Bootstrap 4 example on CodePen —> https://codepen.io/Chacapamac/pen/RwQZvBX
HTML
<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a>
<br /><br />
Other test link here
</div>
<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a> </div>
—————————————————————————————————————————————
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="log-in-tab" data-bs-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="true">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" id="forgot-password-tab" data-bs-toggle="tab" href="#forgot-password" role="tab" aria-controls="forgot-password" aria-selected="false">Forgot password</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sign-up-tab" data-bs-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign up</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">
Login tab<br />
</div>
<div class="tab-pane fade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">
Forgt password tab
</div>
<div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
Sign-up tab
</div>
</div>
<br /><br /><br /><br />
I also try to replace href in the nav by data-bs-target
CSS
html {
padding: 20px !Important;
margin: 20px !Important;
}
div.big-spacer { height: 800px;
}
Script
$('.tab-link').on('click', function(event) {
event.preventDefault();
var target = $('[data-toggle="tab"][href="' + this.hash + '"]');
target.trigger('click');
target[0].scrollIntoView(true);
});
::::::::::::::::::::::::::::::::::::::::::::: :::::::::: PROBLEM BOOTSTRAP 5 ::::::::::
My Bootstrap 5 example is scrolling to view but not opening the tab. The tabs are working fine. —> https://codepen.io/Chacapamac/pen/wvyPLdG
My code: Only changes from the Bootstap 4 code** - I replace “data-toggle” by “data-bs-toggle” (in html, js)
HTML
<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a>
<br /><br />
Other test link here
</div>
<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a> </div>
—————————————————————————————————————————————
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="log-in-tab" data-bs-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="true">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" id="forgot-password-tab" data-bs-toggle="tab" href="#forgot-password" role="tab" aria-controls="forgot-password" aria-selected="false">Forgot password</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sign-up-tab" data-bs-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign up</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">
Login tab<br />
</div>
<div class="tab-pane fade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">
Forgot password tab
</div>
<div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
Sign-up tab
</div>
</div>
<br /><br /><br /><br />
I also try to replace href in the nav by data-bs-target
CSS
html {
padding: 20px !Important;
margin: 20px !Important;
}
div.big-spacer { height: 800px;
}
Script
$('.tab-link').on('click', function(event) {
event.preventDefault();
var target = $('[data-bs-toggle="tab"][href="' + this.hash + '"]');
target.trigger('click');
target[0].scrollIntoView(true);
});