Динамически добавлять активный класс в bootstrap li в Rails

Ответ 1

Читайте о current_page? здесь

Вы можете добавить метод для логики обработки с помощью current_page?, например метод:

module ApplicationHelper

 def active_class(link_path)
  current_page?(link_path) ? "active" : ""
 end

end

example шаблон загрузочного экрана

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Итак, на вид выглядит как

HTML

<li class="<%= active_class(some_path) %>">
<%= link_to "text of link", some_path %>
</li>

HAML

%li{:class => active_class(some_path)}
  = link_to "text of link", some_path

Или вы можете использовать request.fullpath, чтобы получить текущий полный путь, если текущий путь имеет параметр

Пример

<ul>
 <% Contry.all.each do |c| %>
  <li class="snavitem <%= active_class(contry_path(c)) %>">
    <%= link_to "show #{c.name}", contry_path(c) %>
  </li>
 <% end %>
</ul>

и на application_helper.rb

def active_class(link_path)
  request.fullpath == link_path ? "active" : "" 
end

читайте о request.fullpath здесь

Ответ 2

на мой взгляд, более чистый способ добиться этого - написать метод link_to_in_li в application_helper.rb:

def link_to_in_li(body, url, html_options = {})
  active = "active" if current_page?(url)
  content_tag :li, class: active do
    link_to body, url, html_options
  end
end

то используйте его таким образом

<%= link_to_in_li "Home", root_path, id: "home_link" %>

Я нашел код внутри li немного трудным для чтения.

Ответ 3

Для тех, у кого есть проблемы с пониманием этого, вот пример с моими путями и именами файлов, изложенными явно. Как довольно новый человек для рельсов, мне было трудно понять это. Спасибо другим людям, которые ответили выше, поскольку это помогло мне понять это!

Я поместил навигационную панель Bootstrap в файл application.html.erb:

<div class="navbar-header">

  <a class="navbar-brand" href="/">Mapper</a>
  <ul class="nav navbar-nav">

    <li class="<%= is_active?('/') %>"><%= link_to "Home", '/' %></li>
    <li class="<%= is_active?('/main/map') %>"><%= link_to "Map", '/main/map' %></li>
    <li class="<%= is_active?('/main/about') %>"><%= link_to "About", '/main/about' %></li>

  </ul>
</div>

Это находится в файле application_helper.rb:

module ApplicationHelper

def is_active?(link_path)
 current_page?(link_path) ? "active" : ""
end

end

Что это! Теперь ваше приложение будет динамически добавлять "активный" класс в любую просматриваемую страницу (т.е. Соответствующий элемент списка в навигационной панели). Это намного проще (и более DRY), чем добавление navbar вручную на каждую страницу (просмотр), а затем обновление класса "active".

Ответ 4

Я отправлю свой ответ, который я создал на основе этих других, потому что в случае просмотров CRUD активный класс не был помещен.

module ApplicationHelper
 def active_class(name)
   controller_name.eql?(name) || current_page?(name) ? 'active' : ''
 end
end

Мои представления используют что-то вроде этого:

  <ul class="nav navbar-nav">
    <li class="nav-item <%= active_class('/') %>">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item <%= active_class('leads') %>">
      <a class="nav-link" href="/leads">Leads</a>
    </li>
  </ul>
  <ul class="nav navbar-nav pull-right <%= active_class(edit_user_registration_path) %>">
    <li class="nav-item ">
      <a class="nav-link" href="/users/edit">Perfil</a>
    </li>
    <li class="nav-item">
      <%= link_to('Sair', destroy_user_session_path, method: :delete) %>
    </li>
  </ul>

Ответ 5

Попробуйте это на каждой странице, проверьте котроллер или действие и добавьте css

Например:

<li class= <%= (controller.controller_name.eql?('pages') && controller.action_name.eql?('index') )? 'active':''%> ><%= link_to 'my page', pages_path%></li>

Ответ 6

Вы можете определить вспомогательный метод в application_helper.rb

def create_link(text, path)
  class_name = current_page?(path) ? 'active' : ''

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

Теперь вы можете использовать как:

create_link 'xyz', any_path, который будет отображаться как <li class="active"><a href="/any">xyz</a></li>

Идеально подходит для начальной загрузки!

Ответ 7

Зачем ограничивать себя только элементами li? И почему бы не поддерживать несколько имен классов вместе с active? Это решение позволяет мне:

• Поддержка не только обычного текста, но и HTML внутри link_to (например, добавить значок внутри ссылки)
• Добавьте несколько строк кода в application_helper.rb
• Добавить active ко всему имени класса элемента ссылки, а не быть единственным классом.

Итак, добавьте это в application_helper.rb:

def active_class?(class_name = nil, path)
  class_name ||= ""
  class_name += " active" if current_page?(path)
  class_name.strip!
  return class_name
end

И на вашем шаблоне вы можете иметь что-то вроде этого:

<div class="col-xs-3">
  <%= link_to root_path, :class => active_class?("btn btn-outline-primary", root_path) do %>
    <i class="fa fa-list-alt fa-fw"></i>
  <% end %>
</div>

Вы также можете указать или не использовать class_name и использовать его следующим образом:

<li class="<%= active_class?(root_path) %>">Home</li>

Благодаря предыдущим ответам 1, 2 и ресурсы.