Forum PHP.pl > Aktywne menu i ładowanie funkcją .load

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Aktywne menu i ładowanie funkcją .load

damianpsp2000

10.07.2012, 07:05:37

Witam.
Jestem nowym użytkownikiem, mam na imię Damian, 15 lat i programuję od dwóch lat znam php, mysql, html, css i js.
Otóż tak:

Mam problem a właściwie dwa problemy jeden z aktywnym menu a drugi z napisem ładowanie.
Mam w stylach .css klase .active i .menu są one takie same tylko różnią się background'em,
W js a dokładniej w jquery za pomocą funkcji .load wczytuję dany plik wygląda to tak:

[HTML] pobierz, plaintext 
////////tutaj jest plik z jquery.js//////////
 
 
<script language="javascript">
 
function ajaxLoad(plik, divladowany, divobecny){
 
$('#'+divladowany).html('Ładowanie Treści...');
setTimeout(function(){
$('#'+divladowany).load(plik);
}, 3000);
 
$('#'+divobecny).attr('class', 'active');
 
}
 
</script>
 
</head>
<body>
<div class="menu" id="home" onClick="ajaxLoad('kontakt.html', 'tresc', 'home')">
<span>Home</span>
</div>
<div class="menu" id="rejestracja" onClick="ajaxLoad('kontakt.html', 'tresc', 'rejestracja')">
<span>Rejestracja</span>
</div>
<div class="menu" id="regulamin" onClick="ajaxLoad('kontakt.html', 'tresc', 'regulamin')">
<span>Regulamin</span>
</div>
<div class="menu" id="kontakt" onClick="ajaxLoad('kontakt.html', 'tresc', 'kontakt')">
<span>Kontakt</span>
</div>
<div id="tresc"></div>
</body>
</html>
[HTML] pobierz, plaintext

i wszystko ok działa...
link się uaktualnia
ale chciałbym tak, że jak kliknę
na inny link czyli na inny div o class="menu" ten poprzedni co jest równy class="active" zmieniał się spowrotem na class="menu";/
Nie wiem jak to wykonać. Proszę o pomoc.

Drugi problem opiszę po rozwiązaniu tego problemu.

Pozdrawiam.

rocktech.pl

10.07.2012, 08:23:38

Witam.

Zacznij od uproszczenia skryptu. Tu demo.

To menu zgodnie z ideą Progressive enhancement powinnom wyglądać tak.

[HTML] pobierz, plaintext 
<ul>
<!-- NIe mam JS ale kliknąć mogę -->
<li><a href="kontakt.html" class="menu"><span>Home</span></a></li>
</ul>
...
<div id="tresc"></div>
[HTML] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext 
$('a.menu').each(function(el) {
    $(this).on('click', function(event){
        event.preventDefault();
        $(this).addClass('active');
        $('#tresc').load($(this).href);
    });
});
[JAVASCRIPT] pobierz, plaintext

Co do twoich pytań

1 ) Po kliknięciu na dany element usuwasz klasę .active z pozostałych patrz each() i removeClass() albo toggleClass()
2) Co do ładowania load() za to nie lubię jQuery.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.