Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [prototype] bezpośredni adres do zakładki
Kierson
post
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 10.12.2010

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

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.
Go to the top of the page
+Quote Post
kalmaceta
post
Post #2





Grupa: Zarejestrowani
Postów: 183
Pomógł: 24
Dołączył: 4.12.2010

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

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


Ten post edytował kalmaceta 10.12.2010, 13:49:41


--------------------
kAlmAcetA
Go to the top of the page
+Quote Post
Kierson
post
Post #3





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 10.12.2010

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

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


Ten post edytował Kierson 10.12.2010, 15:14:28
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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 Aktualny czas: 19.08.2025 - 05:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn