How can I open a tab from a link on the same page (Bootstrap)?

[hqps]

Hi there - I’m just learning Bootstrap and come from a design background so I have a lot to learn.

I’m trying to link to a specific TAB on the same page of a one page website. I’ve tried following advice in some stack overflow forums but it’s beyond my understanding for now.

Can anyone please help me trouble shoot this?

http://www.philippasherin.com/admin/clients/2016/worldElectrical/Ver1Web/index12August2016_4.html

I want to link from the three links (domestic, commercial, industrial) at the top of theh page to their respective tabs further down the page if possible.

Thanks.

[m3g4p0p]

Hi @hqps! As long as this happens within the same page, you could trigger a click() event on the corresponding tab, like

$('.hero a').click(function() {
    $('.nav-tabs a[href="' + this.getAttribute('href') + '"]').click();
});

However, this will not work from an external link. Also, the smooth scroll will only work on a second click since it needs the linked div to be shown – you’d have to incorporate both the tabbing and the smooth scroll into the same click handler. (Simply show()ing the corresponding tab would not be feasible since it would likely interfere with BS’s internal workings.)

But since you’re using IDs for the tabs anyway, you might also just ditch those BS tabs and use a purely ID-based tab solution. This way you could directly link to a specific tab from anywhere, and wouldn’t have to worry about various click handlers depending on each other (like click to trigger BS tab → BS switches tabs → smooth scroll to tab content).