32 votos

Bootstrap CSS Navegación Activa

En el proceso de arranque sitio web de la subnav coincide con las secciones y los cambios de color de fondo como usted o desplácese a la sección. Quería crear mi propio menú sin todos los colores de fondo y todo, sin embargo, he cambiado mi CSS a ser similar, pero cuando me desplazarse hacia abajo o haga clic en el elemento de menú de la clase activa no cambia. No estoy seguro de lo que estoy haciendo mal.

HTML:

<ul class="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS:

.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}

He comprobado los archivos; jQuery, bootstrap.js y bootstrap.css están conectados correctamente. ¿Tengo que añadir algo de jQuery o me estoy perdiendo algo de CSS para obtener el activo para cambiar como el subnav menú en su sitio?

36voto

David Puntos 241

Esto es lo que terminó con el puesto que usted tiene que borrar los otros también.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

27voto

Nick Beranek Puntos 1942

Para cambiar la clase, es necesario realizar algunas de JavaScript.

En jQuery:

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

En JavaScript:

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

Espero que esto ayude.

14voto

hbinduni Puntos 175

este es mi código para el manejo de twitter bootstrap lista de navegación:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });

13voto

konsumer Puntos 955

Yo uso 2 1-liners, dependiendo de cómo mi nav está estructurado

Sólo asegúrese de que ninguno de sus enlaces tienen clase activa para iniciar.

real enlaces

Si tus enlaces de navegación son independientes de los archivos HTML (como una plantilla de diseño en express.js que tiene un menú), usted puede hacer esto:

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

hash enlaces

Si son los hash hacer esto:

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

Si usted no desea desplazarse en hash clic con el botón return false:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

7voto

Mauvis Ledford Puntos 12424

Mirando algunas de las otras respuestas, si desea que la página web desplazarse hacia abajo para que la sección cuando un menú lateral que se hace clic en, a continuación, usted no desea preventDefault.

Además, usted sólo tiene que quitar el activo de la clase y añadir uno nuevo no buscar a través de todos los li. También quiere que el código no hacer nada cuando el elemento de la lista que ha seleccionado ya está activo-no innecesariamente agregar y quitar la misma clase activa. Por último, usted debe poner su detector de eventos en los que un elemento no el li tiene un tiempo más fácil de la activación de un evento de clic en iPhones y tablets, etc. También podría usar .delegate así que usted no tiene que esperar para que un DOM listo evento. Así que al final me gustaría hacer algo como esto (supongo que te has precargado jQuery):

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X