[jQuery] addClass i removeClass w rozwijanym menu Opcje

[john_doe]

Witam,

mój problem jest tutaj

http://jsfiddle.net/agwFv/7/


chciałbym oznaczać element menu w który kliknięto.
Wiem, że jeszcze brakuje usuwania klasy ale dlaczego nie dodaje mi "current" ?

Ten post edytował john_doe 4.10.2011, 22:27:13

[melkorm]

@Edit

Pośpieszyłem się trochę, może też dlatego że masz dwa razy to samo ID ?

Luknij na to

Ten post edytował melkorm 4.10.2011, 21:41:39

[john_doe]

sam już nie wiem, menu działa bez zarzutu tylko ten current mnie testuje
ale nawet jak w metodzie generującej menu zmieniłem na class="nav"
css z "#" na "." i js i tak nie nadaje mi current

Ten post edytował john_doe 4.10.2011, 21:48:29

[zegarek84]

skoro dodajesz klasę dla elementów #nav li a
to w css powinieneś co najmniej dać #nav ul li a.current
a zgodnie ze strukturą drzewa to dokładnie:
#nav ul li>a.current

w każdym bądź razie chciałeś dodać klasę a nie id i to do elementu li a nie a?? (css):
#nav ul li#current a

ps. firebug się kłania - poza tym strona coś teraz mi się ledwo ładowała ;p

ps. zresztą na tak niską strukturę to zbędne tu jest w ogóle w css ul li - fakt nie sprawdzałem jak dokładnie określiłeś inne style, gdyż inaczej nie będzie można nadpisać stylu - ale taka dokładność to trochu bez potrzeby...

ps. sorki coś chaotycznie napisałem (miewam tak po prau głębszych ale może zrozumiesz - BŁĄD MASZ W CSS)

Ten post edytował zegarek84 4.10.2011, 22:53:16

[john_doe]

racja zegarek, dzięki.

rozwiązanie
jsFiddle

tak by nie zakładać nowego wątku.

cała akcja z tym postem okazała się pudłem kurcze.

system nad którym pracuję po kliknięciu w menu przeładowuję stronę, więc to rozwiązanie nie zakosi.
Jak rozwiązujecie taki temat pokazaniu aktywnego li gdy strona jest przeładowywana?

[zegarek84]

system nad którym pracuję po kliknięciu w menu przeładowuję stronę, więc to rozwiązanie nie zakosi.
Jak rozwiązujecie taki temat pokazaniu aktywnego li gdy strona jest przeładowywana?

nie doprecyzowałeś o co konkretnie chodzi - dla przykładu jeśli dane chciałeś pobierać ajax'em i nie chciałeś, żeby strona przechodziła do klikniętego linku to mogłeś zwrócić false w nasłuchiwanej funkcji lub skożystać z jQuer'owego .stopPropagation...

jeśli z kolei masz tam jakiś system, że nie ważne na jaką stronę ktoś z internetu wejdzie to możesz jakoś po id czy inaczej przeszukać wszystkie linki i dodać klasę active... lub jak w ogóle nie masz pomysłu jak "routing" na linki rozwiązać podczas ładowania strony (różne adresy) to musisz sobie porównać pełne rozwinięcie linku z obiektem document.location, a dokładniej z jego własnością .href oraz jeśli potrzebujesz to też .hash

przez pełne rozwinięcie linku mam na myśli adres na jaki wskazują, i tak pusty link wskazuje dokładnie na tą samą stronę (bodajże nawet przy ustawionym base w HTML'u), pusty link ale z hashem wiadomo... i jeśli linki masz względne to pełny ich adres jest albo względem aktualnej strony albo w zgledem ustawionego tagu base na stronie... i właśnie podczas ładowania strony wystarczy porównać te adresy dla dokładnego porównania z hashem lub mniej dokładnego gdyż ta sama strona i można by słabszy active ustawić bez hasha...

a jeśli masz jeszcze zagłębienia menu i chciałbyś też zaznaczyć, że jest się w jakiejś kategorii (gdzie aktualna strona jest podkategorią i linki w zasadzie są jakby różne) to musisz ustalić odpowiednią sobie strukturę drzewa zależności - mając link aktualnej strony który znalazłeś po adresie możesz zacząć szukać w górę wg zależności dziecko->rodzic (nie mam na myśli zależności DOM gdyż linków nie powinno się zagnieżdżać w sobie - chyba, że HTML5 coś zmienił)

musiałbyś bardziej zobrazować/wyjaśnić o co chodzi, ale sądzę, że to co napisałem powinno rozwiązać Twój jeden lub drugi problem...

ps. jeszcze sobie przypomniałem o pseudoklasie :target - jeśli każdy link ma też hash'a i elementy na stronie będą miały id (name chyba też może być po staremu) ten sam co hash to definicja dotyczy tych elementów... jest też biblioteka dzięki której ta pseudoklasa działa także na ie starszych od 9 (wpisz w google: js ie7) http://ie7-js.googlecode.com/svn/test/target.html#bananas

Ten post edytował zegarek84 6.10.2011, 10:05:06

[john_doe]

chyba wykorzystam to, że bread crumps generuję szukając ojców -> czyli poruszam się od klikniętego linka w górę aż do roota
znając nazwę klikniętego menu muszę odszukać ( jakoś nie wiem jeszcze jak ) elementu <li><a href="#">menuPosition</a></li> z takim "menuPosition" i do niego dodać klasę current.

[zegarek84]

[JAVASCRIPT] pobierz, plaintext 
//np. w ten deseń:
var $a = $('#nav a'),
iL = $a.length,
sTitle = 'menuPosition'.toLowerCase();
for (var i = 0; i < iL; ++i) {
    // lub przez bezpośrednie porównanie tekstu i tytułu
    if($($a[i]).text().toLowerCase().indexOf(sTitle)!==-1){
        // skoro sprawdzone to element a albo przekazujesz dalej jako argument funkcji
        //  albo tutaj robisz co chcesz
        // rodzic element li to $($a[i]).parent();
        // np. tutaj dla a dodamy klasę current do a:
        $($a[i]).addClass('current');
        // I DOSYĆ ISTOTNE CELEM OPTYMALIZACJI PRZERYWAMY PRZEGLĄDANIE PĘTLI
        // fakt jest taki, że to rozwiąznie też jest mało optymalne ale lepszy rydz jakk nic
        break;
    }
}
[JAVASCRIPT] pobierz, plaintext 

swoją drogą chyba prościej by było gdybyś dał przykłady live ;p

Ten post edytował zegarek84 6.10.2011, 11:43:54

[john_doe]

wiem ale nie mam jeszcze tego gdzie zapakować on-line.
dzięki zagarek84. obadam to po południu i podzielę się efektami

miłego