Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Aktywne menu i ładowanie funkcją .load
damianpsp2000
post 10.07.2012, 07:05:37
Post #1





Grupa: Zarejestrowani
Postów: 51
Pomógł: 1
Dołączył: 10.07.2012

Ostrzeżenie: (0%)
-----

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 
  1. ////////tutaj jest plik z jquery.js//////////
  2.  
  3.  
  4. <script language="javascript">
  5.  
  6. function ajaxLoad(plik, divladowany, divobecny){
  7.  
  8. $('#'+divladowany).html('Ładowanie Treści...');
  9. setTimeout(function(){
  10. $('#'+divladowany).load(plik);
  11. }, 3000);
  12.  
  13. $('#'+divobecny).attr('class', 'active');
  14.  
  15. }
  16.  
  17. </script>
  18.  
  19. </head>
  20. <body>
  21. <div class="menu" id="home" onClick="ajaxLoad('kontakt.html', 'tresc', 'home')">
  22. <span>Home</span>
  23. </div>
  24. <div class="menu" id="rejestracja" onClick="ajaxLoad('kontakt.html', 'tresc', 'rejestracja')">
  25. <span>Rejestracja</span>
  26. </div>
  27. <div class="menu" id="regulamin" onClick="ajaxLoad('kontakt.html', 'tresc', 'regulamin')">
  28. <span>Regulamin</span>
  29. </div>
  30. <div class="menu" id="kontakt" onClick="ajaxLoad('kontakt.html', 'tresc', 'kontakt')">
  31. <span>Kontakt</span>
  32. </div>
  33. <div id="tresc"></div>
  34. </body>
  35. </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.

Ten post edytował damianpsp2000 10.07.2012, 07:08:11
Go to the top of the page
+Quote Post
rocktech.pl
post 10.07.2012, 08:23:38
Post #2





Grupa: Zarejestrowani
Postów: 587
Pomógł: 131
Dołączył: 8.02.2010

Ostrzeżenie: (0%)
-----

Witam.

Zacznij od uproszczenia skryptu. Tu demo.

To menu zgodnie z ideą Progressive enhancement powinnom wyglądać tak.
[HTML] pobierz, plaintext 
  1. <ul>
  2. <!-- NIe mam JS ale kliknąć mogę -->
  3. <li><a href="kontakt.html" class="menu"><span>Home</span></a></li>
  4. </ul>
  5. ...
  6. <div id="tresc"></div>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. $('a.menu').each(function(el) {
  2.     $(this).on('click', function(event){
  3.         event.preventDefault();
  4.         $(this).addClass('active');
  5.         $('#tresc').load($(this).href);
  6.     });
  7. });
[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.

Ten post edytował rocktech.pl 10.07.2012, 08:25:57


--------------------
Despite the tons of examples and docs, mod_rewrite is voodoo. Damned cool voodoo, but still voodoo. --Brian Moore

I never go looking for a sucker. I look for a Champion and make a sucker of of him. --Amarillo Slim

Home-made : js-gui-classes | Accordion | Tabs | Carousel / php-sms-classes | Obsługa bramki SMS MultiInfo | Obsługa bramki SMS Mobiltek
Go to the top of the page
+Quote Post
« Następny starszy · AJAX · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 29.06.2025 - 23:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn