Javascript ile “display:none / block”

28 / Şubat / 2008 Author

İsa Engiz

javascript Tags

javascript

Yorumlar kapalı

Önceki yazılarımızda javascript-innerHTML kullanarak bir içeriği göster – gizle uygulaması yapmıştık. Ona benzer bir uygulamayı ise innerHTML kullanmadan, javascript ile doküman elemanının sitil özelliğini değiştirerek yapabiliriz.

Bize bu konuda yardıma koşan CSS kodu “display:none; display:block;”. Bunun bir örneğini görmek için buraya tıklayabilirsiniz, dosyaları ise buradan indirebilirsiniz.

Adım 1

Başlamadan önce dokümanda tıklamadan sonra gösterilecek içeriği belirliyoruz ve onu div etiketi içerisine alıyoruz:

<div id="icerik">
 
<p>selamlar, bu da bir başka yazı</p>
<p>bu da bir başka paragraf...</p>
 
</div>

Adım 2

Daha sonra bu içeriğin gösterilmesini engelleyecek olan CSS kodunu ekliyoruz:

#icerik
{
	display:none;
}

Böylece sayfa yüklendiği zaman “icerik” id’sine sahip eleman gözükmeyecek.

Adım 3

Dokümanda tıklanınca içeriği gösterecek bağlantıya javascript fonksiyonunu ekliyoruz:

<a href="#" onclick="goster()">buraya</a>

Adım 4: Javascript kodu

son olarak javascript kodunu yazmalıyız:

var sayi = 0;
function goster()
{
	if (sayi == 0)
	{
		document.getElementById("icerik").style.display = "block";
		sayi = 1;
	}
	else
	{
		document.getElementById("icerik").style.display = "none";
		sayi = 0;
	}
}

Burada yaptığımız ilk önce “sayi” isimli bir değişken oluşturmak. Bu değişkenin görevi tıklama alanına tıklandığında “icerik” alanının gösterilip gösterilmediğini öğrenmek. sayfa yüklendiğinde varsayılan olarak sayi=0 durumunda. Eğer içerik gösterilmiyorsa;

if (sayi == 0)
{
	document.getElementById("icerik").style.display = "block";
	sayi = 1;
}

kodun bu bölümü çalışıyor, javascript ile “icerik” id’sine sahip elemanın “display” özelliğini değiştiriyoruz ve “block” yapıyoruz. Ayrıca şu anda “icerik” kısmı görünür hale geldiğinden “sayi” değişkenini 1 yapıyoruz.

İçerik gösteriliyorken tıklanırsa kodun ikinci kısmı çalışıyor:

else
{
	document.getElementById("icerik").style.display = "none";
	sayi = 0;
}

Bu kod parçası da aynı şekilde “icerik” id’sine sahip elemanın “display” özelliğini değiştiriyor ve katmanı tekrar gizliyor.

İçeriği “gösterip – gizleme” uygulaması javascript ile doküman elemanlarının sitil özelliklerinin değiştirilmesiyle daha kolay olmakta. Daha sonraki yazılarda ise bu özelliği kullanmanın bize neler sağladığını göreceğiz…

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!

Bu yazı yorumlara kapalı.

Arama

E-Posta Aboneliği

RSS Aboneliği

En Çok Yorumlanan Yazılar

Etiketler

404 ajax apache arama butonu as astrofizik açık kaynak banner blogger blogger/blogspot Blogger / Blogspot blogspot case chmod css date dosya yükleme editör etiket etkinlik favicon featured form ftp galeri Genel gimp hata sayfası header htaccess htpasswd ilişkisel veritabanı index innodb javascript join JQuery kategori koodla linux mysql opacity php resim url

Son Yorumlar

Murat: Güzel bir teknik, şu ana kadar sınırsız alt kategori lazım olmadı ama olmayacağı anlamına gelmiyor
iilyas: Bu kodlar çalışmıyor arkadaşım. Localde olduğu içinmi acaba ?
iilyas: Arkadaşım çok teşekkür ediyorum. Harika anlatmışsın ajaxla çalışmalara başlamak lazım estetik açısından.....
Nuri: bende bu şekilde bir çalışma yaptım ancak bir sorunum var ne yaptıysam url den index.php bölümünü kaldıramadım....
Kemal: Makale için çok teşekkürler, resimleri div tagları ile yapabilirmiyiz. Bu arada imagelara link verirsek daha...

KOODLA | BLOG