Targeting a bootstrap 4 tab panel from another page

Question

I want to open a tab panel on say a service.html page when i click a link on my index page. I'm working with bootstrap nav-pills and here's part of what I have tried already which 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 my index.html file

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

At the moment, this will only take me to the default services page but will not open the tab content which is what i want. What's the correct way to implement this?

Nitin Dhomse · Answer 1 · 2018-01-11T06:22:11.377

0

Add the following code in your service.html

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

edited Jan 11 '18 at 06:22

answered Jan 11 '18 at 06:02

Nitin Dhomse

2,524
1
12
24

Added the script but it behaves the same way, opening the default services page – Mena Jan 11 '18 at 06:17
This should work, put console.log() and debug, this code should be inside jquery ready / $function() – Nitin Dhomse Jan 11 '18 at 06:19
Nothing was returned from console.log() – Mena Jan 11 '18 at 06:29
I meant, console.log(tabPanelId) value and verify, after that hit $("#v-pills-manpower").click(); from console and check is tab is getting opened – Nitin Dhomse Jan 11 '18 at 06:31
I'm getting the correct id. When i hit $("#v-pills-manpower").click() from my console, the tab is opened in the console too. – Mena Jan 11 '18 at 06:44
I've added .trim() later, there may be spaces after id, try with that as well – Nitin Dhomse Jan 11 '18 at 06:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162966/discussion-between-nitin-dhomse-and-mena). – Nitin Dhomse Jan 11 '18 at 09:33

Targeting a bootstrap 4 tab panel from another page

1 Answers1