Open specific Tab when link is clicked from another page

Question

Good day guys, I need help,

When a link is clicked on another page I need the tab to be displayed after the page loads, I've seen this being done using the hash #id but is there any possible way to do this with the data-filter as they're the ones controlling the tabs?

   <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul class="nav nav-pills" id="filters">
            <li class="active"><a href="#" data-filter="*">All</a></li>
            <li><a href="#" data-filter=".Tab1">Tab1</a></li>
            <li><a href="#" data-filter=".Tab2">Tab2</a></li>
             <li><a href="#" data-filter=".Tab3">Tab3</a></li>
          </ul>
        </div>
      </div>
    </div>

Answer 1

You could pass special request parameter in query string. Then get the parameter value and activate corresponding tab.

For example, add tab-name into query string of target URL (the full relative URL is /my-page?tab-name=profile ). Following expression returns value of the parameter, that equals to 'profile' :

var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];

If tab-name is omitted the expression returns empty string.

Then select navigation tab by received value and activate its associated pane using show method.

 var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1]; tabName='profile'; // remove this line on real page if(tabName.length) $('#myTabs .nav-link[href="#' + tabName + '"]').tab('show'); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <ul class="nav nav-pills" id="myTabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> 

Note, in the snippet I set value of tabName directly, because it is not possible to send custom request to the snippet. So, you have to remove tabName='profile'; on your real page.