Target download bar 4 from another page

Question

I want to open the tab bar on the service.html page when I click the link on my index page. I work with the nav-pills bootstrap and here is part of what I already tried that didn't work.

service.html

<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li class="nav-item">
    <a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Support</a>
</li>
</div>

<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
    <h5>Manpower Support</h5>
</div>
</div>

This is the link in the index.html file

<a href="services.html#v-pills-manpower">Manpower</a>

For now, this will only lead me to the default services page, but will not open the contents of the tab that I want. What is the right way to implement this?

Answer 1

Add the following code to your service.html

$(function(){
  var tabPanelId = window.location.hash.substr(1).trim();
  // tabPanelId will give your "v-pills-manpower" id
  $("#"+tabPanelId").click();
});