Forum PHP.pl > [JavaScript][HTML]Pomoc przy funkcji JS

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML]Pomoc przy funkcji JS

Raven1122

13.09.2012, 17:28:23

Witam, napisalem taki kodzik:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function togglediv(id){
var divstatus = document.getElementById(id);
if(divstatus.style.display == 'block')
divstatus.style.display = 'none';
else
divstatus.style.display = 'block';
}
</script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="pl" />
  <meta name="Robots" content="ALL" />
  <meta name="keywords" content="">
  <meta name="description" content="" />
  <title></title>
</head>
<body>
<a onClick="togglediv('foo')">Naglowek 1</a>
<div id="foo" style="display:block;">Tresc naglowka 1</div>
<br /><br /><br />
<a onClick="togglediv('foo2')">Naglowek 2</a>
<div id="foo2" style="display:none;">Tresc naglowka 2</div>
</body>
</html>
[HTML] pobierz, plaintext

I teraz potrzebuje zrobic tak, aby przy otworzeniu naglowka 2 automatycznie zamykal sie naglowek 1, jak to zrobic?

Crozin

13.09.2012, 17:41:53

W funkcji togglediv() najpierw ukryj wszystkie elementy, które mogą być odkryte, a następnie odkryj jeden element powiązany z klikniętym linkiem.

Raven1122

13.09.2012, 17:44:46

a w jaki sposob to zrobic? jestem w js jescze lajkiem wiec nie wiem jak wszystkim nadac display:none;

@EDIT//

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

b4rt3kk

13.09.2012, 17:57:12

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

[HTML] pobierz, plaintext 
$(
$('a').click(togglediv());
);
 
function togglediv() {
  $('a div').attr('style', 'display:none');
  $(this).children('div').show('fast');
}
[HTML] pobierz, plaintext

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

Raven1122

13.09.2012, 18:06:29

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
$(
$('a').click(togglediv());
);
 
function togglediv() {
  $('a div').attr('style', 'display:none');
  $(this).children('div').show('fast');
}
</script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="pl" />
  <meta name="Robots" content="ALL" />
  <meta name="keywords" content="">
  <meta name="description" content="" />
  <title></title>
</head>
<body>
<a href="#">Naglowek 1</a>
<div id="foo" style="display:block;">Tresc naglowka 1</div>
<br /><br /><br />
<a href="#">Naglowek 2</a>
<div id="foo" style="display:block;">Tresc naglowka 2</div>
</body>
</html>
[HTML] pobierz, plaintext

nie dziala

b4rt3kk

13.09.2012, 18:10:22

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 
<div>
<a href="#">Naglowek 1</a>
<div style="display:block;">Tresc naglowka 1</div>
</div>
<div>
<a href="#">Naglowek 2</a>
<div style="display:none;">Tresc naglowka 2</div>
</div>
[HTML] pobierz, plaintext

Teraz jQuery:

[HTML] pobierz, plaintext 
$(
$('a').click(togglediv());
);
 
function togglediv() {
  $('div div').attr('style', 'display:none');
  $(this).closest('div').children('div').show('fast');
}
[HTML] pobierz, plaintext

W sekcji HEAD musisz dodać bibliotękę jQuery:

[HTML] pobierz, plaintext 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
[HTML] pobierz, plaintext

Raven1122

13.09.2012, 19:08:55

Nie dziala :s

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="pl" />
  <meta name="Robots" content="ALL" />
  <meta name="keywords" content="">
  <meta name="description" content="" />
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
$(
$('a').click(togglediv());
);
 
function togglediv() {
  $('div div').attr('style', 'display:none');
  $(this).closest('div').children('div').show('fast');
}
</script>
</head>
<body>
 
<div>
<a href="#">Naglowek 1</a>
<div style="display:block;">Tresc naglowka 1</div>
</div>
<div>
<a href="#">Naglowek 2</a>
<div style="display:none;">Tresc naglowka 2</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

b4rt3kk

13.09.2012, 20:01:19

Dobra, inaczej, to musi działać

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

Skrypt:

[HTML] pobierz, plaintext 
  <script type="text/javascript">
$(
$('a').click(function(){
  $('.klasa1').attr('style', 'display: none;');
  $(this).closest('div').children('.klasa1').show('fast');
};);
);
</script>
[HTML] pobierz, plaintext

Raven1122

13.09.2012, 21:33:07

dalej nie dziala

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.