Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     jQuery ile Tab Uygulaması
     gürcü     16.01.2014     03:21:05



Yukarıdaki şekil, jquery kullanılarak yapılmış olan basit bir tab uygulamasıdır. Yazının detayında yer alan kodları metin editöre yapıştırıp html olarak kaydediniz. Daha sonra tarayıcıda görüntüleyiniz. Kodları görmek için başlığa tıklayınız.



<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
$(function(){
$("ul#tab li:first").addClass("aktif") /*başlangıçta 1. tab seçili olsun diye class atadık*/
$("div.tab").hide()      /*bütün divleri gizledik*/
$("div.tab:first").show();      /*1. divi gösterdik*/
$("ul#tab li").click(function(){      /*li ye tıklandığında*/
var indis = $(this).index()          /*tıklanan li nin indis numarasını değişkene atadık*/
$("ul#tab li").removeClass("aktif")    /*li lerdeki class ları siliyoruz*/
$(this).addClass("aktif") /*tıklanan li ye class ekliyoruz*/
$("div.tab").hide() /*divleri gizledik*/
$("div.tab:eq(" + indis + ")").show() /*seçili divi gösterdik*/
})
})
</script>
        <style>
ul , li {
list-style:none;                      
}
a{
text-decoration:none;
  }
ul#tab li{
border:1px solid #aaa;
float:left;
margin:10px;
padding:10px;
background-color:#FFF;
}
ul#tab li:hover{
border:1px solid #aaa;
float:left;
margin:10px;
padding:10px;
background-color:#aaa;
    }
ul#tab li.aktif{
background-color:#000;
 
}
ul#tab li a{
color:#000;
}
ul#tab li:hover a{
color:#FFF;
}
ul#tab li.aktif a{
color:#FFF;
}
div.tab{
width:350px;
height:50px;
border:1px solid #aaa;
}
.clear{
clear:both;
}
</style>
    </head>
   <body>
    <ul id="tab">
        <li><a href="#">1.Tab</a></li>
            <li><a href="#">2.Tab</a></li>
            <li><a href="#">3.Tab</a></li>
    </ul>
        <div class="clear"></div>
        <div class="tab">1.Tab divi</div>
        <div class="tab">2.Tab divi</div>
        <div class="tab">3.Tab divi</div>
   </body>
</html>

Facebook'ta Paylaş    
Diğer AJAX İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...