Comment obtenir la navigation Twitter-Bootstrap pour afficher le lien actif?

Je ne comprends pas comment Twitter Bootstrap fait des liens actifs pour la navigation. Si j’ai une navigation régulière comme celle-ci (avec ruby ​​on rails sur la liaison):

 

Comment le garder actif en fonction du lien cliqué?

Je viens de répondre à la même question ici Twitter Bootstrap Pills with Rails 3.2.2

  

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

  

https://github.com/twg/active_link_to

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

#=>

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

    Dans une aide (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”):

      

    Utilisez plutôt cette option pour sélectionner le lien actif dans la navigation basé sur 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 les fichiers logiques 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) -%>
  • <% else -%>
  • <% end -%> <%= link_to 'Home', home_path %>
  • ou même

     
  • class="active"<% end -%>> <%= link_to 'Home', home_path %>
  • Je ne sais pas si vous demandez comment le css de bootstrap est utilisé, ou le côté des rails. Je suppose le côté des rails.

    Si oui, #link_to_if méthode #link_to_if ou la méthode #link_to_unless_current

    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:

      

    Vous pouvez remplacer params[:action] par params[:controller] et définir le nom de votre contrôleur dans le lien.

    Je l’utilise pour chaque li :

  • <%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %>
  • 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

     
  • xyz
  • J’espère que cela aide!

    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éfinissez le lien précédent inactif et le nouveau lien actif.

    Si vos liens vous dirigent vers le serveur (c’est-à-dire, rechargez votre page), vous pouvez simplement rendre le lien actif correctement sur le serveur. Sinon, si vous faites des choses côté client (commutation des volets d’onglet ou autre), vous devez utiliser javascript.

    vous pouvez utiliser tabuleux 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 génération de vue current_page? lorsque vous pouvez spécifier un nom de class personnalisé dans le hachage html_options .

     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 sur la route root_path ):

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

    Beaucoup de réponses ici ont des choses qui fonctionneront, ou des réponses partielles. J’ai combiné un tas de choses pour faire de cette méthode d’assistance de rails que j’utilise:

     # helper to make bootstrap3 nav-pill 
  • 's with links in them, that have # proper 'active' class if active. # # the current pill will have 'active' tag on the
  • # # html_options param will apply to
  • , not . # # 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
  • On pourrait même l'améliorer avec la vérification des arguments pour supporter &block le link_to etc.

    Beaucoup de réponses déjà, mais voici ce que j’ai écrit pour que les icons Bootstrap fonctionnent avec un lien actif. J’espère que ça aidera quelqu’un

    Cet assistant vous donnera:

    1. élément li avec lien contenant du texte personnalisé
    2. Icône optionnelle Bootstrap3
    3. deviendra actif quand 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 – il appenda une icône au lien. Utilisez les noms des icons de glyphes. Si vous voulez une icône sans texte:

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

    Vous semblez avoir besoin de mettre en place un système de navigation. Si c’est complexe, cela pourrait devenir assez moche et assez rapide.

    Dans ce cas, vous souhaiterez peut-être utiliser un plug-in capable de gérer cela. Vous pouvez utiliser la navigation navigateur ou simple (je recommanderais navigasmic car il garde la couche principale dans une vue, où elle appartient, et pas dans une configuration)

    Code le plus court

    Cela concerne les deux éléments nav et sub liste de navigation. Vous pouvez passer soit un tableau un chemin unique 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)

      

    Utilisation de rbuy sur Sinatra ..

    En utilisant le thème nu de bootstrap, voici l’exemple de code de la barre de navigation. Notez le nom de la classe de l’élément -> .nav – comme cela est fait 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 de vue (ou partielle) ajoutez ceci: javascript, cela doit être exécuté chaque fois que la page se charge.

    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’atsortingbut “href” correspond à celle de 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, pas d’assistance

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

    Voici ce que j’ai fait:

    J’ai créé un ViewsHelper et l’a inclus dans ApplicationController:

     include ViewsHelper 

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

     
  • <%= link_to 'Foobars', foobar_path %>
  •   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