Merhaba arkadaÅŸlar. Bugünkü makalemizde jquery ile bir nesneye stil verme ve aynı zamanda stil silme iÅŸlemini anlatacağız. Bu iÅŸlemleri Jquery'de bulunan addClass ve removeClass fonksiyonları ile yapacağız. Hemen uygulamamıza geçelim. Öncelikle css kodlarımız ve html kodlarımız ile baÅŸlayacağız. Sonrasında javascript kodlarımızı yazacağız.

<style>

#divlink {

position:absolute;

top:220px;

}

.link {

font-family:Tahoma;

font-size:13px;

color:#333333;

text-decoration:none;

font-weight:bold;

}

.link:hover {

color:#E9772E;

text-decoration:underline;

}

.bos {

height:200px;

width:400px;

}

.stil1

{

background-color:#01A1FE;

font-family:Tahoma;

font-size:15px;

height:200px;

width:200px;

color:#ffffff;

}

.stil2

{

background-color:#333333;

font-family:Arial;

font-size:18px;

height:200px;

width:300px;

color:#ffffff;

}

.stil3

{

background-color:#f0f0f0;

font-family:Arial;

font-size:21px;

height:200px;

width:400px;

color:#333333;

}

</style>

#divlink linklerimizin içinde bulunduÄŸu divdir. Bununla pek bir iÅŸimiz yok, sadece linklerin sayfa yerleÅŸimini ayarladık. .link ile linklerimizin stilini düzenledik. .bos ile stilini deÄŸiÅŸtireceÄŸimizin divin ilk halini stilsiz halini tanımlıyoruz. .stil1, .stil2, .stil3 ile linklerimize tıkladığımızda uygulanacak olan stilleri tanımladık. Bu kodlarımızı sayfamızda head etiketleri arasına yazıyoruz.

<div class="bos" id="boskutu">&nbsp;Yazı</a>

<div id="divlink">

<a href="#stil1" id="stil1buton" class="link">Stil 1</a><br />

<a href="#stil2" id="stil2buton" class="link">Stil 2</a><br />

<a href="#stil3" id="stil3buton" class="link">Stil 3</a>

</div>

Stilleri uygulayacağımız divimizi ve linklerimizi yazıp css ve javascript ile iliÅŸkilendirebilmek adına id ve class deÄŸerlerini tanımladık. Bu kodlar body etiketleri arasına yazılmalıdır. Åžimdi javascript kodlarımıza geçelim.

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#stil1buton").click(function(){

    $("#boskutu").removeClass("bos").addClass("stil1"); //bos adlı stilimizi sildik ve stil1 stilimizi boskutu id'li divimize atadık.

	$("#boskutu").removeClass("stil2").addClass("stil1");//stil2 adlı stilimizi sildik ve stil1 stilimizi boskutu id'li divimize atadık.

	$("#boskutu").removeClass("stil3").addClass("stil1");//stil3 adlı stilimizi sildik ve stil1 stilimizi boskutu id'li divimize atadık.

	});

});

$(document).ready(function(){

  $("#stil2buton").click(function(){

    $("#boskutu").removeClass("bos").addClass("stil2");//bos adlı stilimizi sildik ve stil2 stilimizi boskutu id'li divimize atadık.

	$("#boskutu").removeClass("stil1").addClass("stil2");//stil1 adlı stilimizi sildik ve stil2 stilimizi boskutu id'li divimize atadık.

	$("#boskutu").removeClass("stil3").addClass("stil2");//stil3 adlı stilimizi sildik ve stil2 stilimizi boskutu id'li divimize atadık.

	});

});

$(document).ready(function(){

  $("#stil3buton").click(function(){

    $("#boskutu").removeClass("bos").addClass("stil3");//bos adlı stilimizi sildik ve stil3 stilimizi boskutu id'li divimize atadık.

	$("#boskutu").removeClass("stil1").addClass("stil3");//stil1 adlı stilimizi sildik ve stil3 stilimizi boskutu id'li divimize atadık.

	$("#boskutu").removeClass("stil2").addClass("stil3");//stil2 adlı stilimizi sildik ve stil3 stilimizi boskutu id'li divimize atadık.

	});

});

</script>

Öncelikle jquery kütüphanemizi sayfamıza ekledik. Sonrasında stil1buton, stil2buton, stil3buton id'li linklerimize tıkladığında yapılması gerekenleri yazdık. Javascript kodlarımızı head etiketleri arasında yazmamız gerekmektedir. Böylelikle bir makalenin daha sonuna geldik. GörüÅŸmek üzere...