Twitter Bootstrap 选项卡：在页面加载时转到特定选项卡答案

【问题标题】：Twitter Bootstrap Tabs: Go to Specific Tab on Page loadTwitter Bootstrap 选项卡：在页面加载时转到特定选项卡
【发布时间】：2012-08-31 12:21:49
【问题描述】：

在我的主页上，有一个指向用户显示页面的链接

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

在用户的节目中，我使用了引导选项卡，

<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>

当我点击链接时，它应该转到用户的显示页面，并且事件选项卡应该在 foucs 中。所以在js中我确实是这样的，

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

此 js 代码将用户重定向到显示页面，但未设置事件选项卡的焦点。我不知道我错过了什么。帮帮我！

【问题讨论】：

您不能简单地从一个页面到另一个页面执行 javascript。检查这些问题：重复：stackoverflow.com/a/10120221/1478467，类似：stackoverflow.com/q/7862233/1478467

标签： ruby-on-rails-3 tabs twitter-bootstrap focus

【解决方案1】：

当您重定向到另一个页面时，标签列表会被刷新。您要么需要输入逻辑以仅在当前页面的选项卡上使用 class="active"，要么您需要使用 tab-content 方法并将所有页面加载到单独的内容 div 中，因此选项卡不会实际上离开他们刚刚更改的页面，<div> 正在显示。

查看 Bootstrap 的 Javascript 部分以获取有关如何执行此操作的更多信息。 http://twitter.github.com/bootstrap/javascript.html#tabs

【讨论】：

【解决方案2】：

在视图中（这是haml）

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

在助手中

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

【讨论】：