web-dev-qa-db-fra.com

Ajouter dynamiquement la classe active à bootstrap li in Rails

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

Quelle est la meilleure manière de s'occuper de ça? J'allais aller à chaque page et en bas avoir une fonction jQuery ajouter la classe active à elle. Y a-t-il une meilleure façon?

ruby-on-railstwitter-bootstraptwitter-bootstrap-rails
28
Alain Goldman

En savoir plus sur current_page?ici

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

module ApplicationHelper

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

end

exemple bootstrap navbar modèle

<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, à la vue ressemble

[~ # ~] 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 le courant plein de chemin si un chemin actuel a un 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 sur votre application_helper.rb

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

lire sur request.fullpath ici

53
rails_id

à 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 utilisez-le de cette façon

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

Je trouve le code à l'intérieur de li un peu difficile à lire.

14
Wawa Loo

Pour tous ceux qui ont du mal à comprendre cela, voici un exemple avec mes chemins et noms de fichiers explicites. En tant que personne assez nouvelle pour Rails, j'avais du mal à le comprendre. Merci aux autres personnes qui ont répondu ci-dessus, car cela m'a aidé à comprendre!

J'ai placé la barre de navigation Bootstrap dans mon fichier 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>

Cela va dans le fichier application_helper.rb:

module ApplicationHelper

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

end

C'est tout! Maintenant, votre application ajoutera dynamiquement la classe `` active '' à la page actuellement affichée (c'est-à-dire qu'il s'agit de 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 (vue) puis de mettre à jour la classe "active".

6
David

Je posterai ma réponse que j'ai créée sur la base de ces autres, car dans le cas des 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

Mes vues utilisent 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
Bruno Casali

Veuillez essayer ceci dans chaque page, vérifier le contrôleur ou 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
Debadatt

Pourquoi vous limiter à seulement li éléments? Et pourquoi ne pas prendre en charge plusieurs noms de classe avec active? Cette solution me permet:

  • Prise en charge non seulement du texte brut mais du HTML à l'intérieur link_to (par exemple, ajouter une icône à l'intérieur du lien)
  • Ajoutez quelques lignes de code à application_helper.rb
  • Ajoutez active au nom de classe entier de l'élément de lien au lieu que ce soit la seule classe.

Alors, ajoutez ceci à 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

Et sur votre modèle, vous pouvez avoir quelque chose comme ceci:

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

Vous pouvez également spécifier ou non un class_name et utilisez-le comme ceci: 

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

Merci aux réponses précédentes 1 , 2 et ressources .

1
Juan Diego Gonzales

Vous pouvez définir une méthode d'assistance dans 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 comme:

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

Parfait pour bootstrap navigation!

1
Dusht