jQuery, mettez en surbrillance élément de menu actif

Je suis en train de faire jQuery pour ma navigation pour mettre en surbrillance l'élément de menu actif (mon menu est fait à l'aide de sprites btw.) Ajout manuel de la classe="active" à l'un des élément de menu, la mise en lumière des œuvres. Mais en utilisant mon code jQuery, rien ne se passe...

Toute idée comment résoudre ce problème?

Ici est un démo violon du problème. http://jsfiddle.net/wvEBw/1/

HTML:

<nav>
    <ul>
        <li><a href="#" id="btn1"></a></li>
        <li><a href="#" id="btn2" class="active"></a></li>
    </ul>
</nav>

CSS: (animation de sprite)

//...

/* sprite menu animations */

nav a#btn1 {
    background-position:0px 0px;
    width:82px;
}

nav a#btn1:hover {
    background-position:0px -82px;
}

nav a#btn1.active {
    background-position:0px -164px;
}

nav a#btn2 {
    background-position:-108px 0px;
    width:82px;
}

nav a#btn2:hover {
    background-position:-108px -82px;
}

nav a#btn2.active {
    background-position:-108px -164px;
    outline: none;
}

jQuery:

$("nav li").click(function() {
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    $(activeTab).show(); //Fade in the active content  
    return false;
}
InformationsquelleAutor Very Curious | 2013-08-07
  1. 7

    Vous avez oublié d'ajouter la bibliothèque jQuery dans votre Violon

    et de fermer correctement votre fonction avec });

    http://jsfiddle.net/wvEBw/3/

    $("nav li").click(function ( e ) {
    e.preventDefault();
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    //$(activeTab).show(); //Fade in the active content  
});

    Aussi cet article pourrait être intéressant: Arrêter D'Abuser Return False

    Voici un rapide coup d'oeil à la doc: de l'événement.preventDefault

    • Salut, merci pour votre solution. Le truc, c'est que ça ne fonctionne toujours pas dans mon projet. J'ai ajouté cette bibliothèque <script src="js/jquery-1.10.2.min.js"></script> dans le <head> de ma page et le script jQuery est en diffenent fichier, également appelée à partir de la tête. Des conseils où peut être le problème?
    • J'ai trouvé le problème! Dû wrapp la fonction dans ce $(document).ready(function() { });. Maintenant ça fonctionne! Merci pour ur aider!
    • merci, oui, toujours assurez-vous toujours que le DOM est à lire avant d'écrire du code 🙂
    InformationsquelleAutor Roko C. Buljan
  2. 2

    Vous pourrait aussi mettre en évidence la navigation en fonction de l'url actuelle en ce qui concerne votre navigation href valeur. Cette méthode est plus efficace en cas de redirections et quand vous sautez directement sur la page d'accueil. Considérons cet exemple:

    $(document).ready(function($) {
    function markNavActive(){
        var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
        var listLinks = $('nav a');

        listLinks.each(function() {
            if ($(this).attr('href') == filename) {
                //alert(filename);
                $(this).addClass('active');
                return;
            }
            if (filename == "") {
                //alert(filename);
                $('.nav a[href="index.php"]').addClass('active');
                return;
            }
        });
    }
    markNavActive();    
});
    InformationsquelleAutor DevWL