Agregar y eliminar la clase activa de un enlace de navegación

Question

He estado buscando tutoriales sobre cómo agregar y eliminar una clase de un enlace desafortunadamente sin ningún éxito. Todas las preguntas anteriores sobre esto me han dado algo de comprensión, pero no me he dado el resultado que quiero lograr.

Estoy tratando de tener un estado activo para mi navegación, agregando y eliminando una clase cuando se hace clic en el enlace.

Esto es lo que tengo en cuanto a JavaScript:

$(document).ready(function(){

    //active state  
    $(function() {
        $('li a').click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('li').children('a').removeClass('active');
            $this.parent().addClass('active');

        });
    });
});

Y esta es mi navegación:

<div id="nav">
    <div id="main-nav" class="center">
        <ul>
            <li><a href="/photography.php">Photography</a></li>
            <li><a href="/web.php">Web</a></li>
            <li><a href="/print.php">Print</a></li>

            <li class="nav-R"><a href="/about.php">About</a></li>
            <li class="nav-R"><a href="/contact.php">Contact</a></li>
        </ul>
    </div><!-- close center -->
</div><!-- close-nav -->

Answer 1

Estás eliminando la clase 'activa' de la más cercana liEl elemento infantil, y luego está agregando la clase activa a la actual aPadre li. En el espíritu de mantener la clase activa en los anclajes y no en los elementos de la lista, esto funcionará para usted:

    $('li a').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });

El enlace activo es el enlace activo. Nunca habría más de un enlace activo en un momento dado, por lo que no hay razón para ser específico para eliminar el active clase. Simplemente retire de todos los anclajes.

Manifestación: http://jsfiddle.net/rq9ub/

Answer 2

Probar:

$(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').find('.active').removeClass('active');
        $this.parent().addClass('active');

    });
});

Su selector estaba mirando el elemento principal de la corriente ($(this)) a elemento, y luego mirar entre los niños de ese elemento para un a. El único a En ese elemento está el que acabas de hacer clic.

En su lugar, mi solución se mueve al más cercano ul y luego encuentra el element that currently has the class ofactivo` y luego elimina esa clase.

También su enfoque, según se publicó, fue agregar el active nombre de clase para el li elemento, y estabas buscando eliminar el nombre de clase de un a elemento. Mi enfoque usa el li, pero eso se puede modificar para usar el a simplemente eliminando el parent() Desde la línea final.

Referencias:

• children().
• closest().
• find().

Answer 3

Creo que quieres:

$this.parents("ul").find("a").removeClass('active');

Answer 4

Prueba esto:

$(function() {
    $('.start').addClass('active');
        $('#main-nav a').click(function() {
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');             
   });
});

Simplemente agregue la clase.

Luego declare la clase. Activa en su CSS como:

#main-nav a.active {

/* YOUR STYLING */

}