CODEWITHSUNDEEP
hyperlinktagstwitter-bootstrap
slovak_100
slovak_100

Reputation: 782

twitter bootstrap tabs link

I have a rails project that's been set up with twitter bootstrap for styling. On one page I have three tabs #1, #2, #3.

I would like to know how I can link to a specific Tab, for example tab #2, from another page. I have tried creating a link with an anchor eg: #2, but it does not work... when the page loads, it automatically loads the tab #1 (note: tab #1 is assigned an 'active' class in the html).

Am I missing something?

Would this require additional JS for it to function property?

Upvotes: 2

Views: 1015

Answers (3)

hellion
hellion

Reputation: 4830

No need for javascript, here. Tabs are triggered as active by using an 'active' class on the tab header and tab content. It is the active class that displays the content and highlights the tab. So, you can pretty easily, conditionally, add the active class to the correct tab header/content.

I use a url param, such as .../?tab=credentials, to target a specific tab via a link. If the url param of tab is present, I index that from the list of tabs, then target that index to be active. If the tab url param is not present, I just target the first tab (index 0) to be active.

Upvotes: 0

slovak_100
slovak_100

Reputation: 782

this code seemed to address the problem:

:javascript
  $(document).ready(function(){
    $('a[href="' + window.location.hash + '"]').click()
  });

Upvotes: 4

dennis
dennis

Reputation: 2020

I think you should look into your routes.rb and change the :root to => "controller#action" It would render another page giving the active class depending on the action rendered

Upvotes: 0

Related Questions