Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]Zmiana menu bez przeładowania
Forum PHP.pl > Forum > Przedszkole
Johnas
Witam! Mam taki prosty skrypt:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2.  
  3. var hash = window.location.hash.substr(1);
  4. var href = $('#nav li a').each(function(){
  5. var href = $(this).attr('href');
  6. if(hash==href.substr(0,href.length-5)){
  7. var toLoad = hash+'.html #content';
  8. $('#content').load(toLoad)
  9. }
  10. });
  11.  
  12. $('#nav li a').click(function(){
  13.  
  14. var toLoad = $(this).attr('href')+' #content';
  15. $('#content').hide('fast',loadContent);
  16. $('#load').remove();
  17. $('#wrapper').append('<span id="load">LOADING...</span>');
  18. $('#load').fadeIn('normal');
  19. window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
  20. function loadContent() {
  21. $('#content').load(toLoad,'',showNewContent())
  22. }
  23. function showNewContent() {
  24. $('#content').show('normal',hideLoader());
  25. }
  26. function hideLoader() {
  27. $('#load').fadeOut('normal');
  28. }
  29. return false;
  30.  
  31. });
  32.  
  33. });
[JAVASCRIPT] pobierz, plaintext

Zastanawia mnie jak w tym menu:
  1. <div id="pos">
  2. <ul class="menu" id="nav">
  3. <li><a class="active" href="index.html"><span><span><span>Filmy</span></span></span> </a></li>
  4. <li><a href="gry.html"><span><span><span>Gry</span></span></span> </a></li>
  5. <li><a href="#"><span><span><span>Muzyka</span></span></span> </a></li>
  6. </ul>
  7. </div>

Zrobić klasę aktywną czyli do <a> dodać class="active"
tolomei
Chodzi Ci o coś takiego ?

http://jsfiddle.net/wNekU/

Dlaczego dajesz tyle spanów w menu ?
Johnas
Dzięki jesteś wielki smile.gif Czemu tyle Spanów? hmm bo inaczej nie wymyśliłem menu że gdy jest aktywne to daje strzałkę w dół.
kamil4u
Cytat
hmm bo inaczej nie wymyśliłem menu że gdy jest aktywne to daje strzałkę w dół.

W takim razie poducz się CSS.
HTML:
  1. <ul>
  2. <li><a href="#">Link 1</a></li>
  3. <li><a href="#" class="active">Link 2</a></li>
  4. <li><a href="#">Link 3</a></li>
  5. </ul>


CSS:
  1. #menu>li>a.active{
  2. padding-left: 20px;
  3. background: url(http://www.graal.pl/wp-content/themes/graal2/img/strzalka.gif) no-repeat;
  4. }


Całość: http://jsfiddle.net/jPXbh/
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.