Modyfikacja listy <ul> Opcje

[palmall]

Witajcie

W ogóle to nie wiem jak się do tego zabrać za bardzo - w javie akurat jestem całkiem zielony...
Potrzebuję zrobić coś takiego - mam sobie w kodzie strony listę <ul>, wygląda to tak:

[HTML] pobierz, plaintext 
            <ul id="navi">
                <li id="selected"><a href="#" id="gotohome">Home</a></li>
                <li><a href="#" id="gotoabout">O mnie</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
[HTML] pobierz, plaintext 

Noo i zasadniczo jest to menu, dalej są jakieś divy coś się przesuwa itp, ale to nie jest istotne.

Problemem dla mnie jest zdjęcie/usunięcie id ustawionego przy pierwszym elemencie listy i przypisanie go do drugiego, trzeciego, czwartego elementu listy w zależności od tego w który element listy kliknę. Bez przeładowania strony.

Czyli, klikam sobie w portfolio i usuwa mi sie id="selected" z pierwszego elemenu <li> i przypisuje mi sie do trzeciego elemenu <li>.

Da się tak zrobić w javascript ?

Pozdrawiam

[piotrex41]

Łatwiej Ci będzie jak zamiast ID przypiszesz klasę. Wtedy robisz zdarzenie click() i .removeClass() ze wszystkich elementów a następnie przypisanie temu wybranemu przez addClass();

Mój przykładowy kod, zmodyfikowany na szybko dla Twoich potrzeb:

Kod

$(function($)
{
    var div = $('ul#navi li a');
    $(div).click(function()
    {
        $(div).removeClass('select');
        $(this).addClass('select');
    });
});

teraz tylko zamiast ID nadajesz klasę select

Ten post edytował piotrex41 26.07.2012, 12:06:08

[palmall]

@piotrex41 dziękuję.

Aaale....

Coś tam w międzyczasie wykminiłem i jednak to nie takie proste jak myślałem.
Cały mykes polega na tym że pod spodem działa jeszcze jQuery ze skryptem który
po pierwsze - przewija w lewo prawo diva znajdującego się pod menu
po drugie - nadaje efekt "lavaLamp" (skrypt taki fajny...) dla tego menu.

Chyba javascriptem tego nie rozkminie. Zresztą zerknij prosze jak to wygląda w działaniu. www.willq.pl.

Ten niebieski element po kliknięciu w O mnie powinien pozostać nad tym elementem... Jeżeli ściągne id z <li> to się rozjeżdza... muszę to jakoś w locie podmienić. tylko jak ? (IMG:style_emoticons/default/smile.gif)

[piotrex41]

Musisz po prostu w reszcie skryptów zmienić to twoje ID na nową klasę i po sprawie. Będzie działać jak trzeba.

[palmall]

Hmm podrąże temat jeszcze.

Zmieniłem id na class, dopisałem element który usuwa i dodaje klase na elemencie <li>, i faktycznie działa, tzn widzę że dopisuje się i usuwa.
Ale niebieski element dalej uparcie wraca na pozycje zadeklarowaną przy starcie strony.
Odpowiada za to ten kawałek kodu:

[HTML] pobierz, plaintext 
			$('li:not(#blob)', navi).hover(function() {
				// mouse over
				clearTimeout(reset);
				blob.animate(
					{
						left : $(this).position().left,
						width : $(this).width()
					},
					{
						duration : options.speed,
						easing : options.easing,
						queue : false
					}
				);
			}, function() {
				// mouse out	
				reset = setTimeout(function() {
					blob.animate({
						width : currentPageItem.outerWidth(),
						left : currentPageItem.position().left
					}, options.speed)
				}, options.reset);
 
			});
[HTML] pobierz, plaintext 

tak się mnie wydaje przynajmniej. I teraz - jak na moje oko bez postaw większych - pomimo że zmieniam przypisanie klasy, to zmienne potrzebne do ustawienia tego #bloba nie odświeżają się.

O co kaman ? Powinien zebrać chyba nowe dane...

[AdIoS_Neo]

Witam,
ten kawałek kodu odpowiada za animację tego niebieskiego "klocka" gdy najedziemy na któryś z elementów menu, a pozycję do której ma wrócić bierze z położenia na stronie elementu currentPageItem = $('.select', navi). Z tym, że wartość do tej zmiennej przekazywana jest tylko raz podczas ładowania strony, a u Ciebie przechodzi się na podstrony bez przeładowania więc i kod trzeba zmodyfikować.
Wstaw tę funkcję:

[JAVASCRIPT] pobierz, plaintext 
function() {
				// mouse out	
				reset = setTimeout(function() {
					blob.animate({
						width : $('#navi .select').outerWidth(),
						left : $('#navi .select').position().left
					}, options.speed)
				}
[JAVASCRIPT] pobierz, plaintext 

zamiast tej którą aktualnie masz i powinno działać.