Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][HTML]Pomoc przy funkcji JS
Raven1122
post
Post #1





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

Witam, napisalem taki kodzik:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. function togglediv(id){
  6. var divstatus = document.getElementById(id);
  7. if(divstatus.style.display == 'block')
  8. divstatus.style.display = 'none';
  9. else
  10. divstatus.style.display = 'block';
  11. }
  12. </script>
  13.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  14.   <meta http-equiv="Content-Language" content="pl" />
  15.   <meta name="Robots" content="ALL" />
  16.   <meta name="keywords" content="">
  17.   <meta name="description" content="" />
  18.   <title></title>
  19. </head>
  20. <body>
  21. <a onClick="togglediv('foo')">Naglowek 1</a>
  22. <div id="foo" style="display:block;">Tresc naglowka 1</div>
  23. <br /><br /><br />
  24. <a onClick="togglediv('foo2')">Naglowek 2</a>
  25. <div id="foo2" style="display:none;">Tresc naglowka 2</div>
  26. </body>
  27. </html>
[HTML] pobierz, plaintext


I teraz potrzebuje zrobic tak, aby przy otworzeniu naglowka 2 automatycznie zamykal sie naglowek 1, jak to zrobic?
Go to the top of the page
+Quote Post
Crozin
post
Post #2





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

W funkcji togglediv() najpierw ukryj wszystkie elementy, które mogą być odkryte, a następnie odkryj jeden element powiązany z klikniętym linkiem.
Go to the top of the page
+Quote Post
Raven1122
post
Post #3





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

a w jaki sposob to zrobic? jestem w js jescze lajkiem wiec nie wiem jak wszystkim nadac display:none; (IMG:style_emoticons/default/biggrin.gif)

@EDIT//

Ogolnie to nie chcialbym zeby kazdy naglowek mial inne id diva, bo jest to uciazliwe, czy jest to mozliwe takie cos?

Ten post edytował Raven1122 13.09.2012, 17:46:25
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Wydaje mi się, że jQuery w tej kwestii byłby bardziej odpowiedni w związku z prostotą użycia.

[HTML] pobierz, plaintext 
  1. $(
  2. $('a').click(togglediv());
  3. );
  4.  
  5. function togglediv() {
  6.   $('a div').attr('style', 'display:none');
  7.   $(this).children('div').show('fast');
  8. }
[HTML] pobierz, plaintext


Stosując powyższy skrypt nie musisz używać ani id, ani onclick, wystarczy czysty HTML.

Ten post edytował b4rt3kk 13.09.2012, 17:59:28
Go to the top of the page
+Quote Post
Raven1122
post
Post #5





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. $(
  6. $('a').click(togglediv());
  7. );
  8.  
  9. function togglediv() {
  10.   $('a div').attr('style', 'display:none');
  11.   $(this).children('div').show('fast');
  12. }
  13. </script>
  14.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  15.   <meta http-equiv="Content-Language" content="pl" />
  16.   <meta name="Robots" content="ALL" />
  17.   <meta name="keywords" content="">
  18.   <meta name="description" content="" />
  19.   <title></title>
  20. </head>
  21. <body>
  22. <a href="#">Naglowek 1</a>
  23. <div id="foo" style="display:block;">Tresc naglowka 1</div>
  24. <br /><br /><br />
  25. <a href="#">Naglowek 2</a>
  26. <div id="foo" style="display:block;">Tresc naglowka 2</div>
  27. </body>
  28. </html>
[HTML] pobierz, plaintext

nie dziala
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #6





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Chociaż nie, nie zauważyłem, że nie stosujesz struktury DOM, mała modyfikacja Twojego kodu HTML by pomogła. Np. dodaj <li> lub <div> zamykający oba elementy.

[HTML] pobierz, plaintext 
  1. <div>
  2. <a href="#">Naglowek 1</a>
  3. <div style="display:block;">Tresc naglowka 1</div>
  4. </div>
  5. <div>
  6. <a href="#">Naglowek 2</a>
  7. <div style="display:none;">Tresc naglowka 2</div>
  8. </div>
[HTML] pobierz, plaintext


Teraz jQuery:

[HTML] pobierz, plaintext 
  1. $(
  2. $('a').click(togglediv());
  3. );
  4.  
  5. function togglediv() {
  6.   $('div div').attr('style', 'display:none');
  7.   $(this).closest('div').children('div').show('fast');
  8. }
[HTML] pobierz, plaintext


W sekcji HEAD musisz dodać bibliotękę jQuery:
[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
[HTML] pobierz, plaintext


Ten post edytował b4rt3kk 13.09.2012, 18:13:07
Go to the top of the page
+Quote Post
Raven1122
post
Post #7





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

Nie dziala :s
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.   <meta http-equiv="Content-Language" content="pl" />
  7.   <meta name="Robots" content="ALL" />
  8.   <meta name="keywords" content="">
  9.   <meta name="description" content="" />
  10.   <title></title>
  11.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  12.   <script type="text/javascript">
  13. $(
  14. $('a').click(togglediv());
  15. );
  16.  
  17. function togglediv() {
  18.   $('div div').attr('style', 'display:none');
  19.   $(this).closest('div').children('div').show('fast');
  20. }
  21. </script>
  22. </head>
  23. <body>
  24.  
  25. <div>
  26. <a href="#">Naglowek 1</a>
  27. <div style="display:block;">Tresc naglowka 1</div>
  28. </div>
  29. <div>
  30. <a href="#">Naglowek 2</a>
  31. <div style="display:none;">Tresc naglowka 2</div>
  32. </div>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #8





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Dobra, inaczej, to musi działać (IMG:style_emoticons/default/smile.gif) 

[HTML] pobierz, plaintext 
  1. <div>
  2. <a href="#">Naglowek 1</a>
  3. <div class="klasa1" style="display:block;">Tresc naglowka 1</div>
  4. </div>
  5. <div>
  6. <a href="#">Naglowek 2</a>
  7. <div class="klasa1" style="display:none;">Tresc naglowka 2</div>
  8. </div>
[HTML] pobierz, plaintext


Skrypt:

[HTML] pobierz, plaintext 
  1.   <script type="text/javascript">
  2. $(
  3. $('a').click(function(){
  4.   $('.klasa1').attr('style', 'display: none;');
  5.   $(this).closest('div').children('.klasa1').show('fast');
  6. };);
  7. );
  8. </script>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Raven1122
post
Post #9





Grupa: Zarejestrowani
Postów: 369
Pomógł: 2
Dołączył: 1.11.2010

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

dalej nie dziala
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 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: 23.08.2025 - 02:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn