Comment faire en sorte que la navigation Twitter-Bootstrap affiche le lien actif?

Je ne comprends pas comment Twitter Bootstrap crée des liens actifs pour la navigation. Si j'ai une navigation régulière comme celle-ci (avec liaison rubis sur rails):

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

Comment le garder actif en fonction du lien sur lequel j'ai cliqué?

Je viens de répondre à la même question ici 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>

Vous pouvez utiliser quelque chose comme (très similaire à ce que @phil a mentionné, mais un peu plus court):

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

https://github.com/twg/active_link_to

<%= active_link_to 'Users', users_path, :wrap_tag => :li %>

#=> <li class="active"><a href="https://stackoverflow.com/users">Users</a></li>

J'ai utilisé un assistant pour implémenter cela dans le style des aides de formulaire de Rails.

Dans un assistant (par exemple 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

Ensuite, dans une vue (par exemple 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 %>

Cet exemple produit (sur la page 'utilisateurs'):

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

Utilisez plutôt ceci pour sélectionner le lien actif dans la navigation en fonction de l'itinéraire actuel sans code serveur:

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

J'ai trouvé le succès en utilisant le logique et ( &&) dans haml :

%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

Pour chaque lien:

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

ou même

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

Je ne sais pas si vous demandez comment le css de bootstrap Twitter est utilisé, ou le côté des rails. Je suppose du côté des rails.

si c'est le cas, vérifiez la #link_to_ifméthode ou la #link_to_unless_currentméthode

Aujourd'hui, j'ai eu la même question / problème mais avec une autre approche pour la solution. Je crée une fonction d'assistance dans application_helper.rb:

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

et le lien ressemble à ceci:

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

Vous pouvez remplacer params[:action]avec params[:controller]et configurer votre nom de contrôleur dans le lien.

J'utilise ceci pour chacun li:

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

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

<li class="active">
  <a href="/any">xyz</a>
</li>

J'espère que ça aide!

Vous devriez le faire vous-même en manipulant les classes CSS. Autrement dit, si un utilisateur clique sur un lien, faites quelque chose (action cible), définissez le lien précédent inactif et le nouveau lien actif.

Si vos liens vous amènent au serveur (c'est-à-dire, rechargez la page), vous pouvez simplement rendre le lien actif correctement sur le serveur. Sinon, si vous faites des choses côté client (changer de volet d'onglets ou autre), vous devez utiliser javascript.

vous pouvez utiliser tabulous pour les liens

article ici sur comment combiner tabulous avec twitter bootstrap et rails 3.x

J'ai écrit une méthode d'assistance simple en utilisant l'assistant de construction dans la vue current_page?lorsque vous pouvez spécifier un classnom personnalisé dans le html_optionshachage.

def active_link_to(name = nil, options = nil, html_options = nil, &block)
  active_class = html_options[:active] || "active"
  html_options.delete(:active)
  html_options[:class] = "#{html_options[:class]} #{active_class}" if current_page?(options)
  link_to(name, options, html_options, &block)
end

Exemples (lorsque vous êtes en root_pathroute):

<%= active_link_to "Main", root_path %>
# <a href="/" class="active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered" %>
# <a href="/" class="bordered active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %>
# <a href="/" class="bordered disabled">Main</a>

Beaucoup de réponses ici ont des choses qui fonctionneront ou des réponses partielles. J'ai combiné un tas de choses pour créer cette méthode d'aide aux rails que j'utilise:

# helper to make bootstrap3 nav-pill <li>'s with links in them, that have
# proper 'active' class if active. 
#
# the current pill will have 'active' tag on the <li>
#
# html_options param will apply to <li>, not <a>. 
#
# can pass block which will be given to `link_to` as normal. 
def bootstrap_pill_link_to(label, link_params, html_options = {})
  current = current_page?(link_params)

  if current
    html_options[:class] ||= ""
    html_options[:class] << " active "
  end

  content_tag(:li, html_options) do
    link_to(label, link_params)
  end      
end

Cela pourrait être rendu encore plus sophistiqué avec la vérification des arguments à prendre en charge &blocksur le link_to, etc.

Beaucoup de réponses déjà, mais voici ce que j'ai écrit pour que les icônes Bootstrap fonctionnent avec un lien actif. J'espère que cela aidera quelqu'un

Cet assistant vous donnera:

1. Élément li avec lien contenant du texte personnalisé
2. Icône Bootstrap3 en option
3. deviendra actif lorsque vous serez sur la bonne page

Mettez ceci dans votre application_helper.rb

def nav_link(link_text, link_path, icon='')
  class_name = current_page?(link_path) ? 'active' : ''
  icon_class = "glyphicon glyphicon-" + icon

  content_tag(:li, :class => class_name) do
    (class_name == '') ? (link_to content_tag(:span, " "+link_text, class: icon_class), link_path)
    : (link_to content_tag(:span, " "+link_text, class: icon_class), '#')
  end
end

Et utilisez le lien:

<%= nav_link 'Home', root_path, 'home'  %>

Le dernier argument est facultatif - il ajoutera une icône au lien. Utilisez les noms des icônes de glyphe. Si vous voulez une icône sans texte:

    <%= nav_link '', root_path, 'home'  %>

Voici ce que j'ai fait:

J'ai créé un ViewsHelper et inclus dans ApplicationController:

include ViewsHelper

Dans ViewsHelper, j'ai créé une méthode simple comme celle-ci:

def page_state(path)
  current_page?(path) ? 'active' : ''
end

À mon avis, je fais ceci:

<li class="<%= page_state(foobar_path) %>"><%= link_to 'Foobars', foobar_path %></li>

Vous semblez devoir mettre en place un système de navigation. Si c'est complexe, cela peut devenir assez laid et assez rapide.

Dans ce cas, vous voudrez peut-être utiliser un plugin capable de gérer cela. Vous pouvez utiliser la navigation navigasmique ou simple (je recommanderais navigasmic car elle garde la couche principale dans une vue, à sa place, et non dans une configuration)

Code le plus court 

Cela concerne les deux éléments de la liste de navigation et de sous-navigation. Vous pouvez transmettre à un tableau un seul chemin et traiter les deux.

application_helper

# Active page method
def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end

vue (html.erb)

<ul class="nav navbar-nav">
  <li class="<%= ap p: home_path %>">Home</li>
  <li class="<%= ap p: account_path %>">Account</li>

  <li class="dropdown <%= ap p: [users_path, new_user_path] %>">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Users</a>
    <ul class="dropdown-menu" role="menu">
      <li class="<%= ap p: users_path %>">Users</li>
      <li class="<%= ap p: new_user_path %>">Add user</li>
    </ul>
  </li>
</ul>

Utilisation de ruby ​​sur Sinatra.

J'utilise le thème nu bootstrap, voici l'exemple de code de la barre de navigation. Notez le nom de classe de l'élément -> .nav - car il est référencé dans le script java.

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

dans la page d'affichage (ou partielle), ajoutez ceci: javascript, cela doit être exécuté à chaque chargement de la page.

extrait de vue haml ->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

Dans le débogueur javascript, assurez-vous que la valeur de l'attribut 'href' correspond à window.location.pathname. C'est légèrement différent de la solution de @Zitrax qui m'a aidé à résoudre mon problème.

Basique, sans aide

<%= content_tag(:li, class: ('active' if request.path == '/contact')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

J'utilise ceci depuis que j'ai plus d'une classe -

<%= content_tag(:li, class: (request.path == '/contact' ? 'active black' : 'black')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

  def active_navigation?(controllers_name, actions_name)
   'active' if controllers_name.include?(controller_name) && actions_name.include?(action_name)
  end

svelte

li class=(active_navigation?(['events'], ['index', 'show'])) = link_to t('navbar.events'), events_path