Twitter Bootstrap Tabs: Go to Specific Tab on Page load

问题

On my home page, there is a link to user's show page

<a id="event_shortcut" href="http://localhost:3000/users/1#event_tab">show events</a>

and in user's show, I used bootstrap tab,

<ul id="user_show_tabs">
    <li >
        <a href="#profile_tab">Profile</a>
    </li>
    <li>
        <a href="#event_tab">Events</a>
    </li>
    <li class="active">
        <a href="#account_tab">Account</a>
    </li>
</ul>

When I click on the link it should go to the user's show page and the event tab should be in foucs. So in js I did like this,

$("#event_shortcut").live("click", function(event){
    event.preventDefault(); 
    window.location = $(this).attr("href"); 
    $('#user_show_tabs a[href="#event_tab"]').tab('show');
});

this js code redirects the user to the show page but the event tab is not set focus. I don't know what I am missing. Help me!

回答1:

When you redirect to another page, the tab list is getting refreshed. You either need to put in logic to only have the class="active" on the tab for the current page, or you need to use the tab-content method and have all of the pages load in separate content divs, so the tabs don't actually leave the page they just change which <div> is being displayed.

Check out the Javascript section of Bootstrap to get more info on how to do this. http://twitter.github.com/bootstrap/javascript.html#tabs

回答2:

in the view(this is haml)

%ul
  li{:class => "#{check_if_active('release')}"
    = link_to "release", part_release_path(@current_organisation, @part)

and in helper

def check_if_active(tab)
  case params[:controller]
  when "parts"
    if ['release'].include?(params[:action])
      tab == "properties" ? "active" : "null"
    end
end

来源：https://stackoverflow.com/questions/12215296/twitter-bootstrap-tabs-go-to-specific-tab-on-page-load