How to open a tab from an external link?

Question

I am using Bootstrap 4 for my webpage, I have encountered a problem with navigation tabs.

I need to open the Forget Password tab on the content page of the Login tab through a hyperlink.

Below code works for me in Bootstrap 3 but not in Bootstrap 4

<ul class="nav nav-tabs" role="tablist"> <li class="nav-item"><a class="nav-link active" href="#log-in" data-toggle="tab">Log in</a></li> <li class="nav-item"><a class="nav-link" href="#forgot-password" data-toggle="tab">Forgot password</a></li> <li class="nav-item"><a class="nav-link" href="#sign-up" data-toggle="tab">Sign up</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="log-in"> Login tab <a href="#forgot-password" data-toggle="tab">Go to Forget Password</a> </div> <div class="tab-pane fade" id="forgot-password">Forgt password tab</div> <div class="tab-pane fade" id="sign-up">sign-up tab</div> </div> 

Answer 1

There are two approaches that I can solve to solve this problem:

• Since Bootstrap 4 does not use url #hash es to navigate tabs, simple javascript can listen for click events on regular links and trigger additional clicks - under the hood - on the corresponding tabs.
• Use url #hash es and open tabs based on changing this value. This approach also has the advantage that the tabs will be directly linked, so you can use, for example, example.com # to open the page with the tab open.

Below you will find two snippets for each approach.

1. Under the hood, press :

 $('.tab-link').on('click', function(event) { // Prevent url change event.preventDefault(); // `this` is the clicked <a> tag $('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click'); }) 

 <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="log-in-tab" data-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-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-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 /> <a href="#forgot-password" Xdata-toggle="tab" class="tab-link">Go to Forget Password</a> </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> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 

2. Using hashes in the URL :

 $(document).ready(function() { function onHashChange() { var hash = window.location.hash; if (hash) { // using ES6 template string syntax $(`[data-toggle="tab"][href="${hash}"]`).trigger('click'); } } window.addEventListener('hashchange', onHashChange, false); onHashChange(); }); 

 <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="log-in-tab" data-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-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-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 /> <a href="#forgot-password" Xdata-toggle="tab" class="tab-link">Go to Forget Password</a> </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> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 

Answer 2

This can be achieved using jQuery by running a function that changes the tab when a link is clicked.

HTML

 <ul class="nav nav-tabs" role="tablist" id="myTabs"> <li class="nav-item"> <a class="nav-link active" href="#log-in" data-toggle="tab">Log in</a> </li> <li class="nav-item"> <a class="nav-link" href="#forgot-password" data-toggle="tab">Forgot password</a> </li> <li class="nav-item"> <a class="nav-link" href="#sign-up" data-toggle="tab">Sign up</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="log-in"> Login tab <a href="#forgot-password" data-toggle="tab" class="forgot-password-link">Go to Forget Password</a> </div> <div class="tab-pane fade" id="forgot-password">Forgt password tab</div> <div class="tab-pane fade" id="sign-up">sign-up tab</div> </div> 

Javascript

 $( ".forgot-password-link" ).click(function() { $('#myTabs li:nth-child(2) a').tab('show') }); 

Codepen example: https://codepen.io/Washable/pen/VQYewy