Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [prototype] bezpośredni adres do zakładki
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Kierson
10.12.2010, 12:22:58
Witam.

Jest sobie prosty skrypcik przełączający zakładki:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. 	div#mainDiv {
  3. 		width:800px;
  4. 	}
  5.  
  6. 	div#menu {
  7. 		width:800px;
  8. 	}
  9.  
  10. 	div#menu a.active{
  11. 		color:#FF0000;
  12. 		text-decoration:none;
  13. 	}
  14.  
  15. 	div#menu ul li {
  16. 		list-style:none;
  17. 		font-size:20px;
  18. 		padding:25px;
  19. 		float:left;
  20. 	}
  21.  
  22. 	div.content {
  23. 		clear:both;
  24. 		display:none;
  25. 	}
  26.  
  27. 	div.content.active {
  28. 		display:block;
  29. 	}
  30. </style>
  31.  
  32.  
  33.  
  34. <script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
  35.  
  36. <script type="text/javascript">
  37.  
  38. function showMenuItem(nr) {
  39.    $$("#menu ul li a.active").first().removeClassName('active');
  40.    $('menuItem'+nr).addClassName('active');
  41.    $$(".content.active").first().removeClassName('active');
  42.    $('Content'+nr).addClassName('active');
  43. }
  44.  
  45. </script>
  46.  
  47.  
  48. <body>
  49.  
  50. <div id="mainDiv">
  51. 	<div id="menu">
  52.     	<ul>
  53.         	<li><a href="#" id="menuItem1" class="active" onclick="showMenuItem(1)">Link 1</a></li>
  54.             <li><a href="#" id="menuItem2" onclick="showMenuItem(2)">Link 2</a></li>
  55.             <li><a href="#" id="menuItem3" onclick="showMenuItem(3)">Link 3</a></li>
  56.             <li><a href="#" id="menuItem4" onclick="showMenuItem(4)">Link 4</a></li>
  57.         </ul>
  58.     </div>
  59.     <div id="Content1" class="content active"><h1>Div 1</h1></div>
  60.     <div id="Content2" class="content"><h1>Div 2</h1></div>
  61.     <div id="Content3" class="content"><h1>Div 3</h1></div>
  62.     <div id="Content4" class="content"><h1>Div 4</h1></div>
  63. </div> 
  64. </body>
  65.  
[HTML] pobierz, plaintext


Jak zrobić by ktoś mógł wejść przez link bezpośredni do konkretnej zakładki (ma się wyświetlić odpowiedni DIV).

W projekcie, który robie to jest dużo bardziej złożone (są podzakładki itd) ale myślę, że jakby ktoś powiedział jak to zrobić na tym przykładzie to sobie poradzę.

pozdrawiam.
kalmaceta
10.12.2010, 13:49:15
można to zrobić przez anchor czyli url wyglada tak http:///stronka.pl/index.html#div2 dalej w js sprawdzasz po prostu window.location.hash

[HTML] pobierz, plaintext 
  1. <script>
  2. if(window.location.hash) {
  3.   // sprawdzamy co jest w hash
  4. } else {
  5.   //ladujemy domyslna
  6. }
  7. </script>
[HTML] pobierz, plaintext
Kierson
10.12.2010, 15:12:31
Dzięki a czy mógłbyś mi pomóc i powiedzieć dlaczego ten kod nie chce działać:

[CSS] pobierz, plaintext 
  1. <style type="text/css">
  2. 	div#mainDiv {
  3. 		width:800px;
  4. 	}
  5.  
  6. 	div#menu {
  7. 		width:800px;
  8. 	}
  9.  
  10. 	div#menu a.active{
  11. 		color:#FF0000;
  12. 		text-decoration:none;
  13. 	}
  14.  
  15. 	div#menu ul li {
  16. 		list-style:none;
  17. 		font-size:20px;
  18. 		padding:25px;
  19. 		float:left;
  20. 	}
  21.  
  22. 	div.content {
  23. 		clear:both;
  24. 		display:none;
  25. 	}
  26.  
  27. 	div.content.active {
  28. 		display:block;
  29. 	}
  30. </style>
[CSS] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
  2.  
  3.  
  4.  
  5. <script type="text/javascript">
  6.  
  7. function showMenuItem(nr) {
  8.    $$("#menu ul li a.active").first().removeClassName('active');
  9.    $('menuItem'+nr).addClassName('active');
  10.    $$(".content.active").first().removeClassName('active');
  11.    $('Content'+nr).addClassName('active');
  12. }
  13.  
  14. <!-- 
  15.  
  16. //#OBSLUGA BEZPOSREDNICH ADRESOW URL
  17.  
  18. -->
  19. if(window.location.hash) {
  20.   // sprawdzamy co jest w hash
  21.  	 if(window.location.hash=="#menuItem1")
  22. 		//alert('jest menuItem1');
  23. 		showMenuItem(1);
  24.  
  25. 	if(window.location.hash=="#menuItem2")
  26. 		//alert('jest menuItem2');
  27. 		showMenuItem(2);
  28.  
  29. 	if(window.location.hash=="#menuItem3")
  30. 		//alert('jest menuItem3');
  31. 		showMenuItem(3);
  32.  
  33. 	if(window.location.hash=="#menuItem4")
  34. 		//alert('jest menuItem4');
  35. 		showMenuItem(4);
  36. } else {
  37.   //ladujemy domyslna
  38. }
  39. </script>
[JAVASCRIPT] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. </head>
  2.  
  3. <body>
  4.  
  5. <div id="mainDiv">
  6. 	<div id="menu">
  7.     	<ul>
  8.         	<li><a href="#" id="menuItem1" class="active" onclick="showMenuItem(1)">Link 1</a></li>
  9.             <li><a href="#" id="menuItem2" onclick="showMenuItem(2)">Link 2</a></li>
  10.             <li><a href="#" id="menuItem3" onclick="showMenuItem(3)">Link 3</a></li>
  11.             <li><a href="#" id="menuItem4" onclick="showMenuItem(4)">Link 4</a></li>
  12.         </ul>
  13.     </div>
  14.     <div id="Content1" class="content active"><h1>Div 1</h1></div>
  15.     <div id="Content2" class="content"><h1>Div 2</h1></div>
  16.     <div id="Content3" class="content"><h1>Div 3</h1></div>
  17.     <div id="Content4" class="content"><h1>Div 4</h1></div>
  18. </div> 
  19. </body>
[HTML] pobierz, plaintext


wpisanie w przegladarce http:///stronka.pl/index.html#menuItem1 skutkuje rzeczywiście wywołaniem funkcji showMenuItem(1); ale zakładka nie przełącza się a w konsoli błędów JS pojawią się:

[JAVASCRIPT] pobierz, plaintext 
  1. Błąd: $$("#menu ul li a.active").first() is undefined
  2. Plik źródłowy: index.html.html#menuItem4
  3. Wiersz: 45
[JAVASCRIPT] pobierz, plaintext
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.