jQuery ile sayfanın arka planını değiştirmek

Öncelikle, Tekrar Merhaba! diyerek başlamak lazım, zira çok uzun zamandır bir şeyler paylaşamıyorum. Tabi bahanem hazır; askerlik, nişan, iş arama, iş’e girme gibi aktiviteler kendimi kendi sitemden uzaklaştırdı ta ki bu güne kadar.

Bu gün çok basit şekilde nasıl jQuery ile sayfalarınızın arka planını (gerek renk, gerek imaj olarak) değiştirebileceğinizi anlatacağım. Aslında mantık çok basit; a tagı ile body ‘mizin classlarını değiştiriyoruz. Nasıl mı ?

İlk olarak örneğimize bakalım

Örnek

Örneği inceledikten sonra script’i inceleyelim:
Not: WP Code Snippet’de problem var, extradan \ ekliyor, düzeltene kadar idare edin :)

$(document).ready(function(){
		$(".varsayilan").click(function(){
		 	$("body").removeClass('mavi').addClass('varsayilan');
			return false;
		 });
		$(".mavi").click(function(){
		 	$("body").removeClass('varsayilan').addClass('mavi');
			return false;
		 });
	});

şimdi de CSS’e bakalım:

body.varsayilan { background: #CCC;}
body.mavi { background:#0CF}

son olarak da HTML:

<body class="varsayilan">
	<a class="varsayilan" href="#">varsayilan</a> | 
	<a class="mavi" href="#">mavi</a>
</body>

Görüldüğü üzere 2 linkimiz var. Biri Body ‘ye atadığımız “varsayılan” classı diğeri ise “mavi” classı. mavi classlı linke tıkladığımızda body deki “varsayılan” classını kaldırıp yerine mavi classını ekliyor. Aynı olayı tekrar varsayılan arka planımıza döndürmek için “varsayılan” linkine de uyguluyoruz. İş te bu kadar basit.

jQuery Arka Plan Değişimi 906 bytes ( 94 kez yüklendi )

Benzer yazılar


Bir Cevap Yazın