Szukałem samouczków na temat dodawania i usuwania klasy z linku niestety bez żadnego sukcesu. Wszystkie wcześniejsze pytania, które dają mi trochę zrozumienia, ale nie daj mi wyniku, który chcę osiągnąć.

Próbuję mieć aktywny stan dla mojej nawigacji, dodając i usuwając klasę po kliknięciu łącza.

Oto, co mam tak daleko jak 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');

        });
    });
});

I to jest moja nawigacja:

<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 -->
6
user782245 5 grudzień 2011, 04:33

3 odpowiedzi

Najlepsza odpowiedź

Wyjmujesz klasę "aktywną" z najbliższego elementu podrzędnego li, a następnie dodawasz aktywną klasę do bieżącego a "s rodzica li. W duchu utrzymania aktywnej klasy na kotwicach, a nie na elementy listy, to będzie działać dla Ciebie:

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

Aktywny link to aktywny link. Nigdy nie był więcej niż jeden link aktywny w danym momencie, więc nie ma powodu, aby być wszystkim specyficznym w usuwaniu klasy {x0}}. Wystarczy usunąć ze wszystkich kotwic.

Demo: http://jsfiddle.net/rq9ub/

19
AlienWebguy 5 grudzień 2011, 00:41

Myślę, że chcesz:

$this.parents("ul").find("a").removeClass('active');
0
Adam Rackis 5 grudzień 2011, 00:38

Spróbuj tego:

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

Wystarczy dodać klasę do elementu NAV, który chcesz mieć najpierw klasa.

Następnie deklaruj klasę. Aktywny w swoich CSS jak:

#main-nav a.active {

/* YOUR STYLING */

}
0
Melros 5 grudzień 2011, 00:41