Ajouter dynamiquement la classe active à bootstrap li dans les Rails

dans la barre de navigation bootstrap. Vous pouvez obtenir l'effet d'un bouton cliqué en ajoutant la classe active. Naturellement, je veux utiliser ceci sur mes pages. Par exemple, si je suis sur la page à propos de nous, je veux que le bouton à propos de nous soit cliqué.

Quelle est la meilleure façon de procéder? Je vais aller à chaque page et en bas ont une fonction jQuery ajouter la classe active. Est-il un meilleur moyen?

25
demandé sur rails_id 2013-07-05 09:42:56

7 réponses

pour tout savoir sur current_page?ici

Vous pouvez ajouter une méthode pour gérer la logique avec current_page?, exemple d'une méthode :

module ApplicationHelper

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

end

exemple bootstrap barre de navigation template

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

Donc, sur l'affichage apparaît comme

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

Ou vous pouvez utiliser request.fullpath pour obtenir courant plein de chemin si un chemin courant a un le paramètre

exemple

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

et application_helper.rb

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

lire au sujet de la demande.fullpath ici

52
répondu rails_id 2017-03-10 04:30:36

a mon avis, Une façon plus propre d'y parvenir est d'écrire un link_to_in_li méthode dans 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

puis utiliser de cette façon 

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

- je trouver le code à l'intérieur de li un peu difficile à lire.

14
répondu Wawa Loo 2014-04-09 23:50:04

pour ceux qui ont du mal à comprendre ceci, voici un exemple avec mes chemins et mes noms de fichier explicitement indiqués. En tant que nouvelle personne sur rails, j'avais du mal à le comprendre. Merci aux autres personnes qui ont répondu ci-dessus, comme il m'a aidé à le comprendre!

j'ai placé le bootstrap navbar dans mon application.HTML.fichier 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>

ceci va dans le Helper application_.rb fichier:

module ApplicationHelper

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

end

C'est elle! Maintenant votre demande ajoutez dynamiquement la classe' active ' à n'importe quelle page actuellement affichée (c'est-à-dire l'élément de liste correspondant dans la barre de navigation). C'est beaucoup plus simple (et plus sec) que d'ajouter manuellement la barre de navigation à chaque page (view) et de mettre à jour la classe 'active'.

6
répondu David 2014-05-19 17:49:16

je vais poster ma réponse que j'ai créée à partir de ces autres parce qu'en cas de vues CRUD la classe active n'a pas été placée.

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

Mon point de vue d'utiliser quelque chose comme ceci:

  <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
répondu Bruno Casali 2016-05-03 11:56:20

essayez cela, dans chaque page, cochez la cotroller ou de l'action et ajouter le css

Par exemple:

<li class= <%= (controller.controller_name.eql?('pages') && controller.action_name.eql?('index') )? 'active':''%> ><%= link_to 'my page', pages_path%></li>
2
répondu Debadatt 2013-07-05 06:26:11

Vous pouvez définir une méthode d'aide à 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

Maintenant, vous pouvez utiliser de la forme:

create_link 'xyz', any_path qui rendrait <li class="active"><a href="/any">xyz</a></li>

parfait pour la navigation bootstrap!

1
répondu Dusht 2015-10-20 08:41:33

Pourquoi vous limiter à seulement li éléments? Et pourquoi pas en charge plusieurs noms de classe avec