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 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.
#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>
<div class="bos" id="boskutu"> Yazı</a>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.
<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>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></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...
<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>
0 Yorum