1

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?

Thibaud Clement
  • 6,607
  • 10
  • 50
  • 103

2 Answers2

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

Community
  • 1
  • 1
bmac151
  • 505
  • 3
  • 8
1

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/

Alexa Y
  • 1,854
  • 1
  • 10
  • 13
  • Thanks for your answer. I can definitely use some JS, I just specified in my question that I was not because most other answers I had found on my own were in cases where tabs were implemented with JS. If I want to go with your solution, where do you recommend to include this JS code: in the view with tags, in a dedicated .coffee file or somewhere else? – Thibaud Clement Oct 23 '15 at 21:37
  • Where possible, it would be best to place javascript (or in this case, coffeescript) in the dedicated file whose name matches that of the controller. – Alexa Y Oct 23 '15 at 21:41