Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [Jquery] Zakładki w menu
Beacri
post
Post #1





Grupa: Zarejestrowani
Postów: 60
Pomógł: 4
Dołączył: 19.02.2008
Skąd: Łódź

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

Witam, dopiero się uczę JQuery i mam jeszcze wiele wątpliwości. Chciałbym zrobić panel użytkownika ale żeby wszystko pojawiało się w ramach jednego formularza. Podstron ma być 5 i chciałbym wiedzieć czy da się to zrobić ładniej niż poniższy kod:

[HTML] pobierz, plaintext 
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  3. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(
  6. function()
  7. {
  8. $("#link1").click(
  9. function()
  10. {
  11. $("#more1").show();
  12. $("#more2").hide();
  13. $("#more3").hide();
  14. });
  15. $("#link2").click(
  16. function()
  17. {
  18. $("#more1").hide();
  19. $("#more2").show();
  20. $("#more3").hide();
  21. });
  22. $("#link3").click(
  23. function()
  24. {
  25. $("#more1").hide();
  26. $("#more2").hide();
  27. $("#more3").show();
  28. });
  29.  
  30. });
  31.  
  32. </script>
  33. </head>
  34. <body>
  35. <div>
  36. <p>Lorem ic, posuere ac.
  37. <a href="#" id="link1">Więcej 1</a>
  38. <a href="#" id="link2">Więcej 2</a>
  39. <a href="#" id="link3">Więcej 3</a>
  40. </p>
  41.  
  42. <p id="more1" style="display: none;">Dział 1</p>
  43. <p id="more2" style="display: none;">Dział 2</p>
  44. <p id="more3" style="display: none;">Dział 3</p>
  45.  
  46. </div>
  47. </body>
[HTML] pobierz, plaintext


PS: znalazłem właśnie coś takiego:
http://ferrante.pl/frontend/javascript/jqu...twe-5-zakladki/

Może uda mi się zrozumieć to dzisiaj (IMG:style_emoticons/default/smile.gif)

Ten post edytował Beacri 28.03.2012, 22:23:08
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
sybii
post
Post #2





Grupa: Zarejestrowani
Postów: 20
Pomógł: 6
Dołączył: 25.10.2010
Skąd: Sanok

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

Jquery jest biblioteką JavaScript, więc podstawy trzeba znać.
Masz tu na szybko:

[PHP] pobierz, plaintext 
  1. <head>
  2. 	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  3. 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  4. 	<style>
  5. 		.more p { display: none; }
  6. 	</style>
  7. 	<script type="text/javascript">
  8. 		var lastMore;
  9. 		function show(id) {
  10. 			if(lastMore != id){
  11. 				$('.more p').hide();
  12. 				$('#'+id).show();
  13. 				lastMore = id;
  14. 			}
  15. 		}
  16. 	</script>
  17. </head>
  18. <body>
  19. 	<div>
  20. 	<div class="menu">Lorem ic, posuere ac.
  21. 		<a href="java script:void(0)" onclick="show('more1')">Więcej 1</a>
  22. 		<a href="java script:void(0)" onclick="show('more2')">Więcej 2</a>
  23. 		<a href="java script:void(0)" onclick="show('more3')">Więcej 3</a>
  24. 	</div>
  25. 	<div class="more">
  26. 		<p id="more1">Dział 1</p>
  27. 		<p id="more2">Dział 2</p>
  28. 		<p id="more3">Dział 3</p>
  29. 	</div>
  30. </div>
  31. </body>
[PHP] pobierz, plaintext

I pamiętaj o tabulacjach, dzięki nim kod jest bardziej przejrzysty.
Go to the top of the page
+Quote Post
Beacri
post
Post #3





Grupa: Zarejestrowani
Postów: 60
Pomógł: 4
Dołączył: 19.02.2008
Skąd: Łódź

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

Dzięki za pomoc (IMG:style_emoticons/default/smile.gif) Podstawy JS oczywiście znam, ale mało z niego korzystałem wcześniej. Po prostu wiedziałem, ze istnieje jakiś wydajniejsze rozwiązanie takie jakie opisałeś w linijkach 8-13 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 16.09.2025 - 06:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn