Ruby-on-rails 如何让 Twitter-Bootstrap 导航显示活动链接？

How to get Twitter-Bootstrap navigation to show active link?

提问by LearningRoR

I'm not understanding how Twitter Bootstrap does active links for the navigation. If I have a regular navigation like this (with ruby on rails linking):

我不明白 Twitter Bootstrap 如何为导航做活动链接。如果我有这样的常规导航（使用 ruby​​ on rails 链接）：

<ul class="nav">
  <li class="active"> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>        
</ul>

How do I keep it active based on the link clicked?

如何根据点击的链接保持活动状态？

采纳答案by Pierre

Just made an answer on the very same question here Twitter Bootstrap Pills with Rails 3.2.2

刚刚在Twitter Bootstrap Pills with Rails 3.2.2 中回答了同样的问题

<ul class="nav">
  <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li>        
</ul>

回答by yorch

You can use something like (very similar to what @phil mentioned, but a little shorter):

您可以使用类似的东西（与@phil 提到的非常相似，但要短一些）：

<ul class="nav">
  <li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li>
  <li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
  <li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>
</ul>

回答by Hesham

https://github.com/twg/active_link_to

https://github.com/twg/active_link_to

<%= active_link_to 'Users', users_path, :wrap_tag => :li %>

#=> <li class="active"><a href="/users">Users</a></li>

#=> <li class="active"><a href="/users">Users</a></li>

回答by Daniel

I used a helper to implement this in the style of Rails' form helpers.

我使用了一个帮助器以 Rails 的表单帮助器的风格来实现它。

In a helper (e.g. app/helpers/ApplicationHelper.rb):

在助手中（例如app/helpers/ApplicationHelper.rb）：

def nav_bar
  content_tag(:ul, class: "nav navbar-nav") do
    yield
  end
end

def nav_link(text, path)
  options = current_page?(path) ? { class: "active" } : {}
  content_tag(:li, options) do
    link_to text, path
  end
end

Then, in a view (e.g. app/views/layouts/application.html.erb):

然后，在视图中（例如app/views/layouts/application.html.erb）：

<%= nav_bar do %>
  <%= nav_link 'Home', root_path %>
  <%= nav_link 'Posts', posts_path %>
  <%= nav_link 'Users', users_path %>
<% end %>

This example produces (when on the 'users' page):

此示例生成（在“用户”页面上时）：

<ul class="nav navbar-nav">
  <li><a href="/">Home</a></li>
  <li><a href="/posts">Posts</a></li>
  <li class="active"><a href="/users">Users</a></li>
</ul>

回答by Christian Landgren

Use this instead to select active link in nav based on the current route without server code:

使用它来根据当前路由选择导航中的活动链接，无需服务器代码：

    $(document).ready(function () {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });

回答by Meltemi

I've found success using the logical and(&&) in haml:

我发现在haml 中使用逻辑和( &&)取得了成功：

%ul.nav
  %li{class: current_page?(events_path) && 'active'}
    = link_to "Events", events_path
  %li{class: current_page?(about_path) && 'active'}
    = link_to "About Us", about_path

回答by phil pirozhkov

For each link:

对于每个链接：

<% if current_page?(home_path) -%><li class="active"><% else -%><li><% end -%>
  <%= link_to 'Home', home_path %>
</li>

or even

甚至

<li <% if current_page?(home_path) -%>class="active"<% end -%>>
  <%= link_to 'Home', home_path %>
</li>

回答by theforce

Today I had the same question/problem but with an other approach for the solution. I create a helper function in application_helper.rb:

今天我有同样的问题/问题，但有另一种解决方案。我在 application_helper.rb 中创建了一个辅助函数：

def navMainAktiv(actionName)
    if params[:action] == actionName    
    "active"
    end
end

and the link looks like this:

链接如下所示：

<li class="<%= navMainAktiv('about')%>"><%= link_to "About", about_path %></li>

You can replace params[:action]with params[:controller]and set your controller name in the link.

您可以替换params[:action]使用params[:controller]，并在链接设置你的控制器名称。

回答by cpjolicoeur

not sure if you are asking about how the twitter bootstrap css is used, or the rails side. I'm assuming the rails side.

不确定您是在询问如何使用 twitter bootstrap css 或 rails 方面。我假设导轨侧。

if so checkout the #link_to_ifmethod or the #link_to_unless_currentmethod

如果是这样，请检查#link_to_if方法或#link_to_unless_current方法

回答by andreofthecape

I use this for each li:

我为每个使用这个li：

<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>

<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>