web-dev-qa-db-fra.com

Comment obtenir la navigation Twitter-Bootstrap pour afficher 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 Ruby sur Rails liant):

<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 puis-je le garder actif en fonction du lien cliqué?

ruby-on-railstwitter-bootstrap
105
LearningRoR

Je viens de faire une réponse sur la même question ici Twitter Bootstrap Pills avec 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>
94
Pierre

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

https://github.com/twg/active_link_to

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

#=> <li class="active"><a href="/users">Users</a></li>

47
Hesham

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

Utilisez plutôt cette option pour sélectionner un 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');
    });
22
Christian Landgren

J'ai trouvé le succès en utilisant logical and (&&) 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
11
Meltemi

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>
5
phil pirozhkov

je ne sais pas si vous demandez comment Twitter bootstrap css est utilisé, ou le côté Rails. Je suppose que Rails côté.

si c'est le cas, #link_to_if la méthode ou la #link_to_unless_current méthode

3
cpjolicoeur

Aujourd'hui, j'avais 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 définissez le nom de votre contrôleur dans le lien.

3
theforce

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!

2
Dusht

J'utilise ceci pour chaque li:

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

2
andreofthecape

vous pouvez utiliser tabulous pour les liens

article ici sur la façon de combiner Tabulous avec Twitter bootstrap et Rails 3.x

1
stephenmurdoch

Vous devriez le faire vous-même en manipulant des classes CSS. En d’autres termes, si un utilisateur clique sur un lien, puis fait quelque chose (action cible), définit le lien précédent inactif et le nouveau lien actif.

Si vos liens vous dirigent vers le serveur (c’est-à-dire, rechargez la page), vous pouvez simplement restituer le lien actif correctement sur le serveur. Sinon, si vous faites des tâches côté client (changement de volet d'onglets ou autre), vous devez utiliser javascript.

1
Sergio Tulentsev

Beaucoup de réponses déjà, mais voici ce que j'ai écrit pour obtenir Bootstrap Icônes travaillant 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 facultative
  3. s'active lorsque vous êtes 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 utiliser le lien:

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

Le dernier argument est facultatif - cela ajoutera une icône au lien. Utilisez des noms d'icônes de glyphes. Si vous voulez une icône sans texte:

    <%= nav_link '', root_path, 'home'  %>
1
Lukasz Muzyka

J'ai écrit une méthode d'assistance simple en utilisant build in view helper current_page? lorsque vous pouvez spécifier un nom personnalisé class dans html_options hash.

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 (quand vous êtes sur root_path _ itinéraire):

<%= 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>
1
cintrzyk

Beaucoup de réponses ici ont des choses qui vont marcher, ou des réponses partielles. J'ai combiné un tas de choses pour faire de cette 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

Il pourrait être encore plus sophistiqué avec la vérification d'arguments pour supporter &block sur le lien_à etc.

1
jrochkind

Basic, No Helper

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

Je l'utilise depuis que j'ai plus d'une classe -

<%= content_tag(:li, class: (request.path == '/contact' ? 'active black' : 'black')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>
0
scottkekoa
  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
0
Nazar Hlynskyi

Utilisation de Ruby sur Sinatra ..

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

/ 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 page.

haml view snippet ->

- 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. Ceci est légèrement différent de la solution de @Zitrax qui m'a aidé à résoudre mon problème.

0
Rishi

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>
0
Nick Res

Code le plus court

Ceci traite à la fois des éléments de navigation et des éléments de liste de navigation secondaire. 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

voir (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>
0
cb24

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

Dans ce cas, vous pouvez utiliser un plugin capable de gérer cela. Vous pouvez utiliser navigasmic ou navigation simple (je recommanderais navigasmic car il garde la couche principale dans une vue, à laquelle elle appartient et non dans certaines configurations)

0
Andrei S