¿Cómo obtener la navegación Twitter-Bootstrap para mostrar el enlace activo?

No entiendo cómo Twitter Bootstrap hace enlaces activos para la navegación. Si tengo una navegación normal como esta (con Ruby on Rails linking):

 

¿Cómo lo mantengo activo según el enlace en el que se hace clic?

Acabo de hacer una respuesta sobre la misma pregunta aquí Twitter Bootstrap Pills with Rails 3.2.2

  

Puedes usar algo como (muy similar a lo que @phil mencionado, pero un poco más corto):

  

https://github.com/twg/active_link_to

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

#=>

  • Users
  • Usé un ayudante para implementar esto al estilo de los ayudantes de formularios de Rails.

    En un helper (por ejemplo, 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 

    Luego, en una vista (por ejemplo, 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 %> 

    Este ejemplo produce (cuando está en la página ‘usuarios’):

      

    Use esto en su lugar para seleccionar el enlace activo en Nav basado en la ruta actual sin código de servidor:

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

    He encontrado el éxito usando la lógica y ( && ) en 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 

    Para cada enlace:

     <% if current_page?(home_path) -%>
  • <% else -%>
  • <% end -%> <%= link_to 'Home', home_path %>
  • o incluso

     
  • class="active"<% end -%>> <%= link_to 'Home', home_path %>
  • no estoy seguro si está preguntando cómo se usa Twitter bootstrap css, o el lado de los Rails. Asumo el lado de los Rails.

    si es así, #link_to_if método #link_to_if o el método #link_to_unless_current

    Hoy tuve la misma pregunta / problema pero con otro enfoque para la solución. Creé una función auxiliar en application_helper.rb:

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

    y el enlace se ve así:

      

    Puede reemplazar params[:action] con params[:controller] y establecer el nombre de su controlador en el enlace.

    Yo uso esto para cada li :

  • <%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %>
  • Puede definir un método de ayuda en 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 

    Ahora puedes usar como:

    create_link 'xyz', any_path que se mostraría como

     
  • xyz
  • ¡Espero eso ayude!

    Debe hacerlo usted mismo mediante la manipulación de clases de CSS. Es decir, si un usuario hace clic en algún enlace, entonces haga algo (acción del objective), establezca el enlace anterior inactivo y el nuevo enlace activo.

    Si sus enlaces lo llevan al servidor (es decir, realiza la recarga de la página), entonces puede procesar el enlace activo correctamente en el servidor. De lo contrario, si está haciendo algo del lado del cliente (cambiando paneles de tabs o lo que sea), tiene que usar javascript.

    podrías usar tabulous para los enlaces

    artículo aquí sobre cómo combinar tabulous con twitter bootstrap y Rails 3.x

    Escribí el método de ayuda simple usando build en view helper current_page? cuando puedes especificar un nombre de class personalizado en hash 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 

    Ejemplos (cuando estás en la ruta de 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 

    Muchas de las respuestas aquí tienen cosas que funcionarán, o respuestas parciales. Combiné un montón de cosas para hacer este método de carriles auxiliares que uso:

     # 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
  • Se podría hacer aún más elegante con la comprobación de argumentos para apoyar &block en el enlace, etc.

    Ya hay muchas respuestas, pero esto es lo que escribí para que Bootstrap Icons funcione con el enlace activo. Espero que ayude a alguien

    Este ayudante te dará:

    1. elemento li con enlace que contiene texto personalizado
    2. Icono de Bootstrap3 opcional
    3. se activará cuando esté en la página correcta

    Pon esto en tu 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 

    Y usa el enlace:

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

    El último argumento es opcional: agregará un ícono al enlace. Usa nombres de íconos de glifo. Si quieres un ícono sin texto:

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

    Parece que necesita implementar un sistema de navegación. Si es complejo, puede ser bastante feo y bastante rápido.

    En este caso, es posible que desee utilizar un complemento que pueda manejar eso. Puede usar navigasmic o navegación simple (recomendaría navigasmic porque mantiene la capa principal en una vista, donde pertenece, y no en alguna configuración)

    Código más corto

    Esto trata tanto de NAV como de los elementos de la lista de navegación secundaria. Puede pasar una matriz por una sola ruta y tratará ambas.

    application_helper

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

    view (html.erb)

      

    Usando ruby ​​en Sinatra …

    Estoy usando el tema básico de bootstrap, aquí está el código de barra de navegación de muestra. Tenga en cuenta el nombre de clase del elemento -> .nav – como se hace referencia en el 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 

    en la página de vista (o parcial) agregue esto: javascript, esto debe ejecutarse cada vez que se cargue la página.

    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); }); }); 

    En el depurador de javascript, asegúrese de que el valor del atributo ‘href’ coincide con window.location.pathname. Esto es ligeramente diferente de la solución de @Zitrax que me ayudó a solucionar mi problema.

    Básico, sin ayuda

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

    Lo uso porque tengo más de una clase

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

    Esto es lo que hice:

    Creé un ViewsHelper e incluí en ApplicationController:

     include ViewsHelper 

    Dentro de ViewsHelper creé un método simple como este:

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

    En mi opinión, hago esto:

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

    Delgado

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