Bootstrap 3: how to link directly to a tab from another page in Rails 4

Question

I am building a web app with Rails 4 and Bootstrap 3.

In one of the pages, I have the following Bootstrap tabs :

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</a></li>
    <li role="presentation"><a href="#billing" aria-controls="billing" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> Billing</a></li>
    <li role="presentation"><a href="#expert" aria-controls="expert" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Expert</a></li>
  </ul>

and then, the following content in these tabs:

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="profile">
    </div>
    <div role="tabpanel" class="tab-pane" id="billing">
    </div>
    <div role="tabpanel" class="tab-pane" id="expert">
    </div>
</div>

When I hover any of these tabs, I see that the direct URL is, ie: http://localhost:3000/account/edit#profile , http://localhost:3000/account/edit#billing and http://localhost:3000/account/edit#expert .

However, when I try to link directly to the tab from another page, the active tab is still the first one (not the one I linked to).

Two notes:

1. I am using Bootstrap tabs "without any JavaScript", as explained in the markdown section in the documentation .

2. I would like to link to these tabs using Rails link_to helper.

Any idea why this is not working?

Answer 1

You're setting the active tab in the view

<li role="presentation" class="active"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</a></li>

which is going to take precedence.

If you want this to work, you need to add the active class to whatever tab is being referenced in the url anchor (#expert, in your case)

See this post if you need code reference.

***EDIT: Since you aren't using js, use the answer at the bottom that dynamically determines the active tab by parsing the request

Answer 2

I don't think you'll be able to accomplish what you're after without throwing some javascript into the mix, as the tabs are meant for intrapage nagivation, not interpage navigation. Additionally, the href tags aren't even required on those tabs, as it's the data-toggle attribute which controls which tab pane to present.

If adding a small javascript snippet is a viable option, this will switch to the appropriate tab when the page is navigated to.

hash = window.location.hash
$("a[href=#{hash}]").click()

https://jsfiddle.net/tL7sutnt/