Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][CSS][PHP]ukrywanie div - ów
Maciek1705
post 1.09.2009, 18:36:33
Post #1





Grupa: Zarejestrowani
Postów: 157
Pomógł: 3
Dołączył: 15.06.2009

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

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ąć

Ten post edytował Maciek1705 1.09.2009, 18:45:17
Go to the top of the page
+Quote Post
wookieb
post 1.09.2009, 18:47:51
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Bo tego w php się nie robi tylko w javascript. Jest sporo takich skryptów. jquery tabs m.in (jak sobie lekko dopasujesz)

Ten post edytował wookieb 1.09.2009, 18:48:19


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
Maciek1705
post 1.09.2009, 19:45:19
Post #3





Grupa: Zarejestrowani
Postów: 157
Pomógł: 3
Dołączył: 15.06.2009

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

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
Go to the top of the page
+Quote Post
Void
post 1.09.2009, 20:03:18
Post #4





Grupa: Zarejestrowani
Postów: 112
Pomógł: 15
Dołączył: 2.02.2007

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

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.
Go to the top of the page
+Quote Post
Skie
post 1.09.2009, 20:06:26
Post #5





Grupa: Zarejestrowani
Postów: 555
Pomógł: 84
Dołączył: 20.02.2008
Skąd: Małopolska

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

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



--------------------
Wieloprocesowość i wielowątkowość w PHP, poznaj Kraken PHP!
Serwer HTTP i WebSocket w PHP | Promise/A+
Strona Domowa | Elradia MMORPG
FireFox: make the web better.
Go to the top of the page
+Quote Post
kefirek
post 2.09.2009, 08:13:28
Post #6





Grupa: Zarejestrowani
Postów: 781
Pomógł: 256
Dołączył: 29.06.2008

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

[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
Go to the top of the page
+Quote Post
Maciek1705
post 2.09.2009, 12:18:31
Post #7





Grupa: Zarejestrowani
Postów: 157
Pomógł: 3
Dołączył: 15.06.2009

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

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
Go to the top of the page
+Quote Post
jasin
post 2.09.2009, 12:37:16
Post #8





Grupa: Zarejestrowani
Postów: 142
Pomógł: 32
Dołączył: 21.08.2008
Skąd: Toruń

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

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



Ten post edytował jasin 2.09.2009, 12:42:02


--------------------
Go to the top of the page
+Quote Post
Maciek1705
post 2.09.2009, 17:20:39
Post #9





Grupa: Zarejestrowani
Postów: 157
Pomógł: 3
Dołączył: 15.06.2009

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

dzięki jasin zadziałało jeszcze raz wielkie dzięki:-)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 18.07.2025 - 15:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn