Как получить Twitter-Bootstrap навигацию, чтобы показать активную ссылку?

Question

Я не понимаю, как Twitter Bootstrap делает активные ссылки для навигации.Если у меня есть обычная навигация, подобная этой (со связыванием ruby ​​на рельсах):

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

Как мне сохранить его активным на основании нажатой ссылки?

Answer 1

Вы можете использовать что-то вроде (очень похоже на то, что упоминал @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>

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

Answer 3

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>

Answer 4

Я использовал помощник для реализации этого в стиле помощников форм Rails.

В помощнике (например, 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

Затем в представлении (например, 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 %>

В этом примере показано (на странице «пользователей»):

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

Answer 5

Используйте это вместо того, чтобы выбрать активную ссылку в навигации на основе текущего маршрута без кода сервера:

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

Answer 6

Я нашел успех, используя логический и (&&) в хамл :

%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

Answer 7

Для каждой ссылки:

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

или даже

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

Answer 8

Сегодня у меня возник тот же вопрос / проблема, но с другим подходом к решению.Я создаю вспомогательную функцию в application_helper.rb:

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

, и ссылка выглядит так:

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

Вы можете заменить params[:action] на params[:controller] и установить имя вашего контроллерав ссылке.

Answer 9

не уверен, спрашиваете ли вы о том, как используется twitter bootstrap css, или о рельсах.Я предполагаю, что сторона рельсов.

, если это так, проверьте метод #link_to_if или #link_to_unless_current метод

Answer 10

Я использую это для каждого li:

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