javascript - 无法使用 ruby​​ (link_to) 方法使用 Bootstrap 可切换选项卡

Question

我在获取 Bootstrap 时遇到困难 togglable tabs使用 link_to View 辅助方法来工作的元素。这是我想要实现的 Bootstrap 代码:

<div role="tabpanel">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

我尝试了以下方法，但没有得到成功的结果:

<div role="tabpanel">
	<ul id="my_menu a" class="nav nav-tabs" role="tablist">
	  <li role="presentation" class="active"><%= link_to "Main", root_path, :role => "tab", :data => {:toggle => "tab"} %></li>
	  <li role="presentation"><%= link_to "Profile", profile_path, :role => "tab", :data => {:toggle => "tab"} %></li>
	  <li role="presentation"><%= link_to "Projects", projects_path, :role => "tab", :data => {:toggle => "tab"} %></li>
	</ul>
</div>

<script>
$('#my_menu a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
</script>

我可以显示选项卡，但单击它们时没有任何反应。我希望问题足够清楚。预先非常感谢!

Answer 1

我发现有一个更简单的替代解决方案:

您可以使用 ruby​​ link_to 帮助程序将基本类添加到菜单项周围的所有元素，然后使用 ruby​​ 帮助程序函数将事件类添加到您当前所在的页面。这意味着选项卡会显示并正确突出显示。

例如在您的 nav.html.erb 部分中:

<nav class="container-fluid">
      <ul class="nav nav-tabs">
        <li class="<%= cp(root_path)%>" role="presentation"><%= link_to "Home", root_path %></li>
          <li class="<%= cp(user_list_path)%>" role="presentation"><%= link_to "All users", user_list_path, class: cp(user_list_path) %></li>
          <li class="<%= cp(my_profile_path)%>" role="presentation"><%= link_to "#{current_user.username}", my_profile_path %></li>
      </ul>
    </nav>

以及您的application_helper.rb

def cp(path)
      "active" if current_page?(path)
    end