jQuery, aktiven Menüpunkt hervorheben

Ich versuche jQuery für meine navigation, markieren Sie den aktiven Menüpunkt (mein Menü wird mit Hilfe von sprites btw.) Manuelles hinzufügen der class="active" um ein Menü-Element, das highlighting funktioniert. Aber mit meinem jQuery-code, passiert nichts...

Irgendwelche Ideen wie man dieses Problem lösen?

Hier ist ein demo fiddle des Problems. 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: (animierte Sprites)

//...

/* 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

    Haben Sie vergessen, fügen Sie die jQuery-Bibliothek in Ihre Geige

    und um richtig schließen Sie Ihre Funktion mit });

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

    Auch dieser Artikel könnte interessant sein: Stoppen Sie Missbrauchen Return False

    Hier ist ein kurzer Blick in die Doku: event.preventDefault

    Hi, Dank dir für deine Lösung. Die Sache ist die, dass es immer noch nicht funktioniert in meinem Projekt. Ich habe diese Bibliothek <script src="js/jquery-1.10.2.min.js"></script> im <head> von meiner Seite und das jQuery-Skript ist im diffenent-Datei, wird auch aus dem Kopf. Irgendwelche Tipps wo das problem liegen könnte?
    Ich habe das problem gefunden! Musste wrapp die Funktion in $(document).bereit(Funktion() { });. Jetzt funktioniert ' s! Vielen Dank für ur help!!!
    thx, ja, immer, immer stellen Sie sicher, dass das DOM Lesen, bevor Sie code schreiben 🙂

    InformationsquelleAutor Roko C. Buljan

  2. 2

    Könnte man auch markieren navigation auf der Basis der aktuellen url mit Bezug auf Ihre Navigations-href-Wert. Dieser Weg ist effektiver im Fall von Umleitungen und wenn Sie springen direkt auf der Startseite. Betrachten Sie dieses Beispiel:

    $(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

Schreibe einen Kommentar