Linking to an ID inside a Bootstrap nav-tab

Question

We are using Bootstrap nav-tabs on our new website's events pages to create different sections on a single page related to our events — About, Speakers, Travel, Register and so on.

Our events coordinator would like to be able to link directly to the individual speakers who appear on the Speakers tab from outside the website. Normally, this is pretty simple — http://domain.name/events/eventspage#speakerID.

However, because we're using nav-tabs, there isn't an easy and obvious way of creating this link. I've looked through posts here and elsewhere to see if anyone else has addressed this problem, but have yet to find anything.

The site was built using Bootstrap 3 and uses ExpressionEngine 2.10 as the CMS.

You can view a working example of how our events pages are set up at https://www.rjionline.org/events/rjicollab.

Any suggestions would be appreciated.

Answer 1

This is how it can work with jQuery:

Select an anchor within a JQUERY Tab from a link on anther webpage

You can adapt the code from there.

Answer 2

Here you can try this function:

function goToTab(){
    var hash=document.location.hash,
        prefix="tab_";
    if(hash)
      $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show')
};