Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS][PHP]ukrywanie div - ów
Forum PHP.pl > Forum > Przedszkole
Maciek1705
1.09.2009, 18:36:33
Witam serdecznie forumowicze mam małe pytanie i prośbę o pomoc w pewnym problemie. Mam taki kod:

[PHP] pobierz, plaintext 
  1. Print ("
  2. <div id='menu'>
  3. <li class='li_menu'><a>Pokoje</a>
  4. <ul class='menu'>
  5. 	<li id='P1'>P1</li>
  6. 	<li id='P2'>P2</li>
  7. 	<li id='P2'>P2</li>
  8.         <li id='P4'>P4</li>
  9. </ul>
  10. </li>
  11. </div>
  12.  
  13. <div id='0'>
  14. opis itp.
  15. </div>
  16.  
  17. <div id='1'>
  18. treść 1 diva
  19. </div>
  20.  
  21. <div id='2'>
  22. treść 2 diva
  23. </div>
  24.  
  25. <div id='3'>
  26. treść 3 diva
  27. </div>
  28.  
  29. <div id='4'>
  30. treść 4 diva
  31. </div>
  32.  
  33. ");
[PHP] pobierz, plaintext


Chciałem uzyskać taki efekt żeby na jednej stronie było kilka divóv ale tylko 1 widoczny, tz Przy ładowaniu strony ma być zawsze widoczny div z id=0 reszta ma być ukryta, lecz np jeśli z listy wyboru kliknę na P1 to chce żeby div o id=0 się ukrył a był aktywny div z id=1 i tak samo dla pozostałych P2, P3 P4 żeby odpowiednio się pokazywały div2, div3, div4. Wszystkie przykłady jakie widziałem były do htmla nie spotkałem się z przykładem do php. Jeśli ktoś potrafi napisać prostą funkcję co by to robiła to proszę o pomoc bo sam nie mogę tego ogarnąć
wookieb
1.09.2009, 18:47:51
Bo tego w php się nie robi tylko w javascript. Jest sporo takich skryptów. jquery tabs m.in (jak sobie lekko dopasujesz)
Maciek1705
1.09.2009, 19:45:19
Masz rację to trzeba zrobić w java script patrzyłem na jquerry co mi podałeś ale to za wysokie progi faktycznie efekt jest niezły płynny itp, ale poziom trudności jest spory. Widziałem kiedyś na przykładzie htmla jak to się robiło za pomocą css i atrybutami display to była prosta funkcja z 8 linijek w java script ale byłe głupi i to wrzuciłem bo mógłbym teraz wrzucić i pokazać co i jak
Void
1.09.2009, 20:03:18
Napisz sobie funkcję js przyjmującą jako parametr ID diva, który ma zostać wyświetlony. Następnie przeleć pętlą po wszystkich pozostałych divach (tu przydałoby się np. przechowywać w jakiejś zmiennej "n" ile jest tych divów i pętlą for iterować od 0 do n-1), aby sprawdzić który ma ustawioną właściwość display na "block" i ustawić ją na "none" (Document.getElementById(n).display='none'). A diva, którego id podano w argumencie funkcji pokazujesz po prostu za pomocą getElementById i ustawiasz display na block.
Skie
1.09.2009, 20:06:26
ukrywanie elementu za pomocą atrybutów CSS:

Niewidoczny:
Kod
document.getElementById(jakies_id).style.display = "none";


Widoczny
Kod
document.getElementById(jakies_id).style.display = "block"; // ew. inline

kefirek
2.09.2009, 08:13:28 
[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  4. <script>
  5. $(document).ready(function() {
  6. $('#start').show('normal');  
  7. $('.toggle').click(function(){
  8. $('.toggle').hide();
  9. $(this).next('div').show();
  10. });
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <?php
  16. echo "<div id='start' class='toggle' style='display:none'>test</div>
  17. <div class='toggle' style='display:none'>test1</div>
  18. <div class='toggle' style='display:none'>test2</div>
  19. <div class='toggle' style='display:none'>test3</div>";
  20. ?>
  21. </body>
  22. </html>
[PHP] pobierz, plaintext
Maciek1705
2.09.2009, 12:18:31
nie uwierzcie znalazłem przykład o którym pisałem już go wrzucam:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  2. <head>
  3.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  4.   <title> [tytuł strony] </title>
  5.  
  6. 	<script type="text/javascript">
  7. 		function pokaz(el) {
  8. 		var i=1
  9. 		for(var i=1; i<8; i++) {
  10. 	document.getElementById('div'+i).style.display = "none";
  11. 	}
  12. 	document.getElementById(el).style.display = "block";
  13. 	}
  14. 	</script>
  15.  
  16.  
  17.   <style type="text/css">
  18. 	#div1 {
  19.     margin-top: 20px;
  20.     margin-left:20px;
  21.     width: 500px;
  22.     height: 500px;
  23.     background-color: red;
  24.     float:left;
  25.     display: block;
  26.     }
  27.  
  28. 	#div2,#div3,#div4,#div5,#div6,#div7 {
  29.     margin-top: 20px;
  30.     margin-left:20px;
  31.     width: 500px;
  32.     height: 500px;
  33.     background-color: green;
  34.     float:left;
  35.     display: none;
  36.     }
  37. 	</style>
  38.  
  39. </head>
  40. <body>
  41.  
  42. <div id="div1">Main
  43. </div>
  44. <div id="div2">Logowanie
  45. </div>
  46. <div id="div3">Rejestracja
  47. </div>
  48. <div id="div4">FAQ
  49. </div>
  50. <div id="div5">Regulamin
  51. </div>
  52. <div id="div6">Autor
  53. </div>
  54. <div id="div7">Polecamy
  55. </div>
  56.  
  57. <div id="menu">
  58.     <a onclick="pokaz('div1')">Strona główna</a><br />
  59.     <a onclick="pokaz('div2')">Logowanie</a><br />
  60.     <a onclick="pokaz('div3')">Rejestracja</a><br />
  61.     <a onclick="pokaz('div4')">FAQ</a><br />
  62.     <a onclick="pokaz('div5')">Regulamin</a><br />
  63.     <a onclick="pokaz('div6')">Autor</a><br />
  64.     <a onclick="pokaz('div7')">Polecamy</a><br />
  65. </div>
  66.  
  67. </body>
  68. </html>
[HTML] pobierz, plaintext


Właśnie o to mi chodzi o takie coś tylko żeby to było w php a jak przerabiam dokument na php to problem pojawia się na "div id=menu" tam są zdarzenia onclick i mają najpierw cudzysłów " " a później apostrofy ' ' i jak ja tam daje print lub echo to pojawia się tam zgrzyt bo onclick bez cudzysłowu nie zadziała a z cudzysłowem jest błąd bo koliduje z echo lub printem i w właśnie dlatego chciałem się zapytać jak to rozkminić żeby poszło
jasin
2.09.2009, 12:37:16
A próbowałeś dać np:
[PHP] pobierz, plaintext 
  1. $html = '<a onclick="pokaz(\'div1\')">Strona główna</a><br />';
  2. echo $html;
[PHP] pobierz, plaintext

lub jesli wolisz używać "":
[PHP] pobierz, plaintext 
  1. $html = "<a onclick=\"pokaz('div1')\">Strona główna</a><br />";
[PHP] pobierz, plaintext

Maciek1705
2.09.2009, 17:20:39
dzięki jasin zadziałało jeszcze raz wielkie dzięki:-)
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.