jquery div show hide

23.06.2012 14:47

muratcan302 Wordpress Uzmanı Kullanıcı

Üyelik 18.06.2011
Yaş/Cinsiyet 49 / E
Meslek Muhasebe
Konum İstanbul Avrupa

Ad Soyad ** **
Mesajlar 91
Beğeniler 4 / 6
Ticaret 2, (%100)

merhaba arkadaşlar

http://jsfiddle.net/mrQcN/ böyle birşey yapmak istiyorum yani buton 1 tıkladığımda div1 açılacak buton2 ye tıkladığımda div1 kapanacak div2 açılacak bunu nasıl yapabilirim yardım ederseniz sevinirim.

23.06.2012 15:15

#2

oerdem Oerdem Kullanıcı

Üyelik 11.05.2012
Yaş/Cinsiyet 29 / E
Meslek Öğrenci, Web Master
Konum

Ad Soyad ** **
Mesajlar 48
Beğeniler 4 / 11
Ticaret 0, (%0)

merhaba öncelikle html olarak şunu yapacaksın




Burada buton birin içeriği

Burada buton ikinin içeriği

daha sonra jQuery Kodunu oluşturacaksın ve şu olacak


$(function(){
	$("#butonbirindivi").hide();
	$("#butonikindivi").hide();
		$("#butonbir").click(function(){
			$("#butonbirindivi").show();
			$("#butonikindivi").hide();
		});
		$("#butoniki").click(function(){
		$("#butonbirindivi").hide();
			$("#butonikindivi").show();
		});

});

show kısmını animate, slidetoggle vs.. gibi efeklerle düzenleyebilirsin senin için önemli olan divlerin ve inputların id leri daha da geliştirilebilir.
divlerin alt alta yan yana olması felan hiç önemli değil sadece div id lerine dikkat et yeterli

1 kişi bu mesajı beğendi.

İletişim: OsmanErdem@mail.com.tr (MSN+Facebook+Twitter+mail)

23.06.2012 15:35

#3

muratcan302 Wordpress Uzmanı Kullanıcı

Üyelik 18.06.2011
Yaş/Cinsiyet 49 / E
Meslek Muhasebe
Konum İstanbul Avrupa

Ad Soyad ** **
Mesajlar 91
Beğeniler 4 / 6
Ticaret 2, (%100)

usta burdaki 2. div kapansın yerine açık olan div kapansın seçeneği yapsak

23.06.2012 15:42

#4

oerdem Oerdem Kullanıcı

Üyelik 11.05.2012
Yaş/Cinsiyet 29 / E
Meslek Öğrenci, Web Master
Konum

Ad Soyad ** **
Mesajlar 48
Beğeniler 4 / 11
Ticaret 0, (%0)

biraz daha açar mısın anlamadım ? zaten 1. div açıkken 2.ye tıkladığında 1.div kapanıyor 2. div açılıyor tekrar birinciye tıkladığında tam tersi

İletişim: OsmanErdem@mail.com.tr (MSN+Facebook+Twitter+mail)

23.06.2012 15:51

#5

muratcan302 Wordpress Uzmanı Kullanıcı

Üyelik 18.06.2011
Yaş/Cinsiyet 49 / E
Meslek Muhasebe
Konum İstanbul Avrupa

Ad Soyad ** **
Mesajlar 91
Beğeniler 4 / 6
Ticaret 2, (%100)

hocam bu divlerden 6 tane olacak :) anlatabildimmi yani 2. div açıkken adam 5. div e tıklarsa 2. div kapansın 5. div açılsın yani istediğini seçebilsin

23.06.2012 16:33

#6

oerdem Oerdem Kullanıcı

Üyelik 11.05.2012
Yaş/Cinsiyet 29 / E
Meslek Öğrenci, Web Master
Konum

Ad Soyad ** **
Mesajlar 48
Beğeniler 4 / 11
Ticaret 0, (%0)

tekrar merhaba indis mantığı ile yapılabilir tabiki diğer tüm divleri tek tek sildirebilirsiniz yada farklı düşünceler ile geliştirebilir ama benim algoritmama gelirsek ;
bütün divleri gizliyorum daha sonra sadece ilk dive bi class atıyorum ve sadece o classı gösteriyorum yada direk ilk divi göster diyebiliriz. Ve daha sonra tıklanması gerek yere tıklandığında indis değerini alıyoruz ve o degere sahip gösterilecek alana yine class ekletiyorum ve o class ı gösteriyorum ki şunu unutmamak gerek diğer atadığım classları sonradan sildiriyorum. laf değil icrat gerek diyorsan buyur ;
HTML KODU



	Bu bir
	
	Bu iki
	
	Bu üç
	
	Bu dört
	
	Bu beş
	
	Bu altı
	
		

			Burada buton birin içeriği

			Burada buton ikinin içeriği
 
			Burada buton üçün içeriği

			Burada buton dördün içeriği
 
			Burada buton beşin içeriği

			Burada buton altının içeriği

Javascript kodu


	<script>
$(function(){
	$(".divmis").hide();
	$(".divmis:first").addClass("acik");
	$(".acik").show();
		$(".buton").click(function(){
				$('.divmis').removeClass('acik');
		var indis = $(this).index();
		var deger = indis-1;
		$(".divmis").hide();
		$(".divmis:eq("+deger+")").addClass("acik");
		$(".acik").show();

		});
});
</script>

İletişim: OsmanErdem@mail.com.tr (MSN+Facebook+Twitter+mail)
Bi teşekkür yeterli :)

1 kişi bu mesajı beğendi.

İletişim: OsmanErdem@mail.com.tr (MSN+Facebook+Twitter+mail)

23.06.2012 16:43

#7

muratcan302 Wordpress Uzmanı Kullanıcı

Üyelik 18.06.2011
Yaş/Cinsiyet 49 / E
Meslek Muhasebe
Konum İstanbul Avrupa

Ad Soyad ** **
Mesajlar 91
Beğeniler 4 / 6
Ticaret 2, (%100)

Teşekkürler :)

tam anlamıyla çalışıyor :) isteyen deneyebilir

23.06.2012 16:48

#8

oerdem Oerdem Kullanıcı

Üyelik 11.05.2012
Yaş/Cinsiyet 29 / E
Meslek Öğrenci, Web Master
Konum

Ad Soyad ** **
Mesajlar 48
Beğeniler 4 / 11
Ticaret 0, (%0)

yardımcı olabildiysem ne ala :)

İletişim: OsmanErdem@mail.com.tr (MSN+Facebook+Twitter+mail)

04.07.2012 15:27

#9

ErenKeskin Girişimci, Front-end Developer Kullanıcı

Üyelik 11.09.2011
Yaş/Cinsiyet 28 / E
Meslek Elektrik-Elektronik Mühendisi
Konum Eskişehir

Ad Soyad E** K**
Mesajlar 1223
Beğeniler 243 / 336
Ticaret 2, (%100)

oerdem adlı üyeden alıntı

merhaba öncelikle html olarak şunu yapacaksın

daha sonra jQuery Kodunu oluşturacaksın ve şu olacak

show kısmını animate, slidetoggle vs.. gibi efeklerle düzenleyebilirsin senin için önemli olan divlerin ve inputların id leri daha da geliştirilebilir.
divlerin alt alta yan yana olması felan hiç önemli değil sadece div id lerine dikkat et yeterli

Adam biliyo ya :) Seni burada görmek güzel OErdem :) Yakında bir portfolyo çalışmanı bekliyoruz ;)

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.

09.07.2012 14:07

#10

oerdem Oerdem Kullanıcı

Üyelik 11.05.2012
Yaş/Cinsiyet 29 / E
Meslek Öğrenci, Web Master
Konum

Ad Soyad ** **
Mesajlar 48
Beğeniler 4 / 11
Ticaret 0, (%0)

Teşekkürler Eren :) Vakit bulursam inş. Biraz daha genişletmek lazım :)

1 kişi bu mesajı beğendi.

İletişim: OsmanErdem@mail.com.tr (MSN+Facebook+Twitter+mail)

jquery div show hide

Üye Girişi Yap