Forum PHP.pl > [inne][JavaScript]problem z fadein - zmiana diva bez przeładowania strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [inne][JavaScript]problem z fadein - zmiana diva bez przeładowania strony

interu58

3.11.2014, 01:21:06

Witam,

Jestem zielony jeśli chodzi o js, ale próbuje coś stworzyć na swojej stronie. Chciałbym osiągnąć efekty po kliknięciu w menu taki jak na tej stronie występuje po kliknięciu w dany kurs http://www.poza-schematami.pl/. Czyli zaciemnienie ekranu i "najazd" treści.

Mam taki kod:

[html][/html]

<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="oferta">

<a href="#strona1" class="menuoferta">
<div id="nazwa">nazwa1</div>
</a>

<a href="#strona2" class="menuoferta">
<div id="nazwa">nazwa2</div>
</a>

<a href="#strona3" class="menuoferta">
<div id="nazwa">nazwa3</div>
</a>

<a href="#strona4" class="menuoferta">
<div id="nazwa">nazwa4</div>
</a>

<div class="trescoferta" id="strona1">
<p></p>

</div>

<div class="trescoferta" id="strona2">

<p></p>
</div>

<div class="trescoferta" id="strona3">

<p></p>
</div>

</div> 

</body>
</html>

<script>
$( "a" ).click(function() {
$( ".trescoferta" ).fadeIn( "slow" );
});
</script>

Coś napisałem nie tak, bo przy wybraniu jakiejkolwiek pozycji z menu wyświetlają mi się wszystkie pozycje z treścią zamiast tej konkretnej i nie mogę się połapać co jest nie tak.
Proszę o podpowiedź odnośnie tego kodu oraz tego w jaki sposób można uzyskać efekt podobny do tego na stronie, do której wkleiłem link.

Turson

3.11.2014, 09:05:38

To chyba logiczne, że jeżeli masz n elementów z daną klasą i chcesz pokazać elementy tej klasy to pokazuje wszystkie. Do <a> możesz np. dodać atrybut ktory odnosi się do tego, który konkretnie element ma otworzyc

kamilo818

3.11.2014, 09:32:28

[PHP] pobierz, plaintext 
<a href="#strona1" class="menuoferta" id="strona1">
<div id="nazwa">nazwa1</div>
</a>
 
<script>
$( "a#strona1" ).click(function() {
 
$( ".div#strona1" ).fadeIn( "slow" );
});
</script>
[PHP] pobierz, plaintext

Turson

3.11.2014, 09:53:07

@kamilo818 i tym sposobem każda pozycja menu = inny kod. Słabo

kamilo818

3.11.2014, 09:57:22

zgadzam sie.

[PHP] pobierz, plaintext 
<script>
$( "a" ).click(function() {
   var id = $(this).attr('href');
   $( id ).fadeIn( "slow" );
});
</script>
[PHP] pobierz, plaintext

i chyba zmienił bym to

[PHP] pobierz, plaintext 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
[PHP] pobierz, plaintext

na bardziej aktualne.

interu58

7.11.2014, 19:43:44

dzięki wielkie. a w jaki sposób można zrobić tak, żeby ten div pojawiający się po kliknięciu pojawił się na tym divie z menu a nie pod spodem? W sensie chciałbym, żeby po kliknięciu zaciemniało się okno z menu i pojawiał się div z tekstem. coś w stylu takim jak są zrobione galerie z zdjęciami.
nigdzie nie mogę zleźć jak to można wykonać.

dzięki wielkie. a w jaki sposób można zrobić tak, żeby ten div pojawiający się po kliknięciu pojawił się na tym divie z menu a nie pod spodem? W sensie chciałbym, żeby po kliknięciu zaciemniało się okno z menu i pojawiał się div z tekstem. coś w stylu takim jak są zrobione galerie z zdjęciami.
nigdzie nie mogę zleźć jak to można wykonać.

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.