Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][PHP]Jak wyróżnić wybraną opcję w menu?
Forum PHP.pl > Forum > Przedszkole
cent4
Witam.
Mam menu (strony ładowane są do div'a ajaxem) i chcę żeby po wybranej opcj w menu została ona specjalnie zaznaczona powiedzmy jakimś kolorem, jak kliknie się inną opcję tamta wraca do swoich ustawień, a ta druga się podświetla...
moje menu:
  1. <a style="cursor:pointer" target="_parent" value="load()" id="load_home">STRONA GŁÓWNA</a>
  2. <a style="cursor:pointer" target="_parent" value="load()" id="load_program">PROGRAM</a>

moja funkcja:
  1. <script type="text/javascript">
  2. $.ajaxSetup ({
  3. cache: false
  4. });
  5. var ajax_load = "<br><br><br><CENTER><img class='loading' src='images/load.gif' alt='' /></CENTER>";
  6.  
  7. $("#SRODEK").html(ajax_load).load("ajax/home.php");
  8.  
  9. $("#load_home").click(function(){
  10. $("#SRODEK").html(ajax_load).load("ajax/home.php");
  11. });
  12.  
  13. $("#load_program").click(function(){
  14. $("#SRODEK").html(ajax_load).load("ajax/program.php");
  15. if (this.href == "/ajax/program.php") { // sprawdzamy, czy adres odnośnika jest równy aktualnemu adresowi
  16. }
  17. });
  18.  
  19.  
  20. $("#load_dom").click(function(){
  21. $("#SRODEK")
  22. .html(ajax_load)
  23. .load(loadUrl + " #picture");
  24. });
  25. </script>



Jak dam coś takiego to zaznacza mi się ale potem się nie odznacza:
  1. $("#load_program").click(function(){
  2. $("#SRODEK").html(ajax_load).load("ajax/program.php");
  3. $(this).css('background-color', 'white');
  4. });
b4rt3kk
Może sprawdzaj aktualny link i jeśli jest zgodny z adresem odnośnika to nadawaj mu odpowiedni kolor?

  1. $(function(){
  2. $('a').each(function(){
  3. if ($(this).attr('href') == window.location.pathname) {
  4. // zmień tło czy coś
  5. }
  6. });
  7. });
cent4
Coś nie umiem tego zastosować...
Co mam tam wpisać w tej funkcji dla podanej np. podstrony program...?
b4rt3kk
To tylko taki przykład, dla każdego a sprawdzany jest atrybut href, którego u Ciebie brakuje, więc możesz sprawdzać np. id, następnie porównywany jest z aktualnym adresem, jeśli atrybut jest powiązany z aktualnym adresem wtedy nadajesz odpowiednie tło temu elementowi. W przypadku id musisz ustalić jakieś powiązanie z adresem, wyciągnąć np. load_home czy load_program i z aktualnego linka tak samo, np. http://strona.pl/home.php
Arcioch
Możesz też po clicku na odpowiednie link nadawać po prostu jakąś klasę active a reszcie elementów ją usuwać. Oczywiście klasa musi być odpowiednio ostylowana w css wink.gif

  1. $("#load_home").click(function(){
  2. $("#SRODEK").html(ajax_load).load("ajax/home.php");
  3. $(this).addClass('active');
  4. $('#load_program, #load_dom').removeClass('active');
  5. });


Trochę łopatologiczne rozwiązanie wink.gif Tylko musisz pamiętać o odpowiednim dostosowaniu funkcji aby click nie był szybszy od loada wink.gif
cent4
Wielkie dzięki Arcioch - jest ok.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.