jQuery İle Tab Menu Yapımı

FacebookPaylaş
#1
İlk önce bir kodlamamıza bakalım değil mi Gülücük
Kod:
https://codepen.io/mehmeteq/pen/VWMarE
Bu dersi html ve css bildiğinizi düşünerek yazıyorum.
Kod:
$(function(){ //fonksiyonumuza başlayalım

$('ul.sekmeler li').click(function(){//ul.sekmeler içindeki li ye tıklanınca
var sekme_id = $(this).attr('sekme');//burada this kelimesi kendisi anlamına geliyor. Yani kendisinin sekme attributesini sekme_id değişkenine atıyoruz.

$('ul.sekmeler li').removeClass('tiklanan');//ul.sekmeler içindeki li ye tıklanınca lilerden 'tiklanan' classı kalkıyor.
$('.sekme-icerik').removeClass('tiklanan');//ul.sekmeler içindeki li ye tıklanınca sekme-icerikteki 'tiklanan' classı kalkıyor.

$(this).addClass('tiklanan');//ul.sekmeler içindeki li ye tıklanınca kendisine 'tiklanan' classı atıyor.
$("#"+sekme_id).addClass('tiklanan');//ul.sekmeler içindeki li ye tıklanınca sekmeler attr si ile eşit olan sekme-icerik classına 'tiklanan' classı atıyor.
});
});
Şurada hepsini tekrardan açıklayalım;

Kod:
$(function(){
Fonksiyonumuza başlama kodu.

Kod:
var sekme_id = $(this).attr('sekme');
Burada sekme_id değişkenine sekme attributesindeki yazıyı atıyoruz.

Kod:
$('ul.sekmeler li').removeClass('tiklanan');
Tıklanınca bütün li lerden 'tiklanan' classı kalkıyor.

Kod:
$('.sekme-icerik').removeClass('tiklanan');
Tıklanınca bütün .sekme-icerik teki 'tiklanan' classı kalkıyor.

Kod:
$(this).addClass('tiklanan');
Tıklananın kendisine 'tiklanan' classı ekliyor.

Kod:
$("#"+sekme_id).addClass('tiklanan');
id si '#' + tıklanan li nin sekme attributesi olana 'tiklanan' classı ekliyor.

Kaynak İçin Bana Tıkla!
Ara
« Önceki Konu | Sonraki Konu »
Konuyu Okuyanlar:
1 Ziyaretçi
Konu ile Alakalı Benzer Konular
Konular
Son Yorum
Hızlı Menü:
task