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

в панели навигации начальной загрузки. Вы можете получить эффект нажатия кнопки, добавив класс active . Естественно, я хочу использовать это на своих страницах. Например,если я на странице о нас, я хочу, чтобы кнопка о нас нажата.

каков наилучший способ сделать это? Я собирался перейти на каждую страницу и внизу есть функция jQuery добавить класс active к нему. Есть ли лучший способ?

25
ruby-on-rails twitter-bootstrap twitter-bootstrap-rails

7 ответов

читать про current_page? здесь

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

module ApplicationHelper

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

end

пример загрузочный navbar шаблон

<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

читать о просьбе.пути здесь

52

на мой взгляд, более чистый способ достичь этого-написать 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 немного трудно читать.

14

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

Я разместил загрузочную панель navbar в своем приложении.формат 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

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

6

я опубликую свой ответ, который я создал на основе этих других, потому что в случае представлений 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>
3

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

например:

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

вы можете определить вспомогательный метод, в 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>

идеально подходит для bootstrap навигации!

1

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

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

Итак, добавьте это в 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 и ресурсы.

1