Javascript İle Sekmeli İçerik Yapısı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu uygulamayı gerçekleştirmek için herhangi bir kütüphaneye veya framework'e (React, Vue vb.) ihtiyacınız yoktur. Sadece modern bir web tarayıcısı ve kod düzenleyici (VS Code gibi) yeterlidir. Projenizi oluştururken şu yapıya dikkat etmelisiniz:

• HTML5: İçerik yapısını tanımlamak için.
• CSS3: Görsel gizleme ve gösterme işlemleri için.
• Modern JavaScript (ES6+): Etkileşimi yönetmek için.

Kodlarınızı yazarken tarayıcı konsolunu (F12) açık tutmanız, olası hataları anlık olarak görmenizi ve hata ayıklama (debugging) yapmanızı kolaylaştıracaktır.

Adım 1: HTML ile Sekme İskeletini Oluşturma

Sekmeli içerik yapısının temelini, sekmeleri temsil eden butonlar ve bu butonlara tıklandığında değişecek olan içerik alanları oluşturur. Aşağıdaki kod bloğu, semantik (anlamlı) HTML etiketlerini kullanarak yapıyı kurar.

  

    Sekme 1
    Sekme 2
    Sekme 3
  
  
Birinci sekme içeriği burada yer alır.
  
İkinci sekme içeriği burada yer alır.
  
Üçüncü sekme içeriği burada yer alır.

Burada data-target özniteliği (attribute), JavaScript'in hangi içeriği göstermesi gerektiğini anlaması için bir anahtar görevi görür. active sınıfı ise o an seçili olan sekmeyi belirtmek için kullanılır.

Adım 2: CSS ile Görsel Düzenleme

Sekmelerin görsel olarak ayrışması ve içeriklerin gizlenip gösterilmesi için CSS kurallarına ihtiyacımız vardır. Aşağıdaki kod, basit bir stil tanımlaması yapar.

.tab-btn { padding: 10px 20px; cursor: pointer; border: none; background: #ddd; }
.tab-btn.active { background: #007bff; color: white; }
.tab-content { padding: 20px; border: 1px solid #ccc; margin-top: -1px; }

Bu stil, aktif olan butonun rengini değiştirerek kullanıcıya geri bildirim sağlar. margin-top: -1px kullanımı, içerik kutusu ile butonlar arasındaki boşluğu kapatmak için pratik bir yöntemdir.

Adım 3: JavaScript ile Etkileşimi Programlama

Şimdi en önemli kısım olan JavaScript mantığını kuralım. Tıklanan butonun data-target değerini alıp, ilgili ID'ye sahip elementi görünür kılacağız.

const buttons = document.querySelectorAll('.tab-btn');
const contents = document.querySelectorAll('.tab-content');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    // Tüm butonlardan active sınıfını kaldır
    buttons.forEach(btn => btn.classList.remove('active'));
    // Tüm içerikleri gizle
    contents.forEach(content => content.style.display = 'none');

    // Tıklanan butona active ekle
    button.classList.add('active');
    // Hedef içeriği göster
    const target = button.getAttribute('data-target');
    document.getElementById(target).style.display = 'block';
  });
});

Bu kod bloğu, her buton için bir olay dinleyici (event listener) ekler. Kullanıcı bir butona tıkladığında, önce mevcut tüm durumlar sıfırlanır, ardından seçilen sekmenin içeriği görünür hale getirilir.

Adım 4: Performans ve Güvenlik İyileştirmeleri

Kodunuzu daha güvenli ve performanslı hale getirmek için DOM erişimlerini optimize etmelisiniz. Özellikle büyük ölçekli projelerde, document.getElementById yerine önbelleğe alınmış değişkenler kullanmak daha verimlidir.

// Güvenli seçim için bir fonksiyon
const showTab = (targetId) => {
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
        contents.forEach(c => c.style.display = 'none');
        targetElement.style.display = 'block';
    }
};

Ayrıca, kullanıcıların tarayıcıda zararlı kod çalıştırmasını önlemek için DOM'a doğrudan içerik enjekte ederken textContent kullanmaya özen gösterin. innerHTML kullanımı, XSS (Cross-Site Scripting) saldırılarına kapı aralayabilir.

Güvenlik Uyarısı: Kullanıcıdan alınan verileri veya dış kaynaklı içerikleri sekmelere dinamik olarak yükleyecekseniz, bu verileri mutlaka temizleyin (sanitize edin). Doğrudan innerHTML kullanmak, kötü niyetli scriptlerin çalışmasına neden olabilir.

Adım 5: Yöntemlerin Karşılaştırılması

Sekmeli içerik yapısı kurarken farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, bu yöntemleri özetlemektedir.

Sıkça Sorulan Sorular

Sekmelerim sayfa yüklendiğinde neden boş görünüyor?

CSS dosyanızda display: none kuralını doğru uyguladığınızdan emin olun. JavaScript kodunuzun DOM yüklendikten sonra (DOMContentLoaded) çalıştığından emin olun.

Aynı sayfada birden fazla sekmeli yapı kullanabilir miyim?

Evet, ancak sınıfları (class) kullanmak yerine kapsayıcı (container) ID'lerini hedef alarak kodunuzu modüler hale getirmelisiniz.

Erişilebilirlik (A11y) için ne yapmalıyım?

Sekmelere role="tab" ve içeriklere role="tabpanel" gibi ARIA etiketlerini ekleyerek ekran okuyucular için uyumlu hale getirebilirsiniz.

Mobil cihazlarda sekmeler nasıl daha iyi görünür?

CSS Media Queries kullanarak, ekran küçüldüğünde sekmeleri dikey bir liste haline getirebilirsiniz.

JavaScript'te hata ayıklama (debug) nasıl yapılır?

console.log() kullanarak tıklama olaylarının tetiklenip tetiklenmediğini ve target değerlerinin doğru gelip gelmediğini kontrol edebilirsiniz.

İleri Seviye: Verileri JSON ile Dinamik Olarak Yükleme

Statik HTML yapısı, içerik miktarı arttığında yönetilmesi zor bir hale gelebilir. Bunun yerine, sekmelerin başlıklarını ve içeriklerini bir JSON dosyasından çekerek DOM'u JavaScript ile dinamik olarak oluşturmak, projenizin sürdürülebilirliğini artırır. Bu yöntem, özellikle içerik yönetim sistemleri (CMS) ile entegrasyon yaparken oldukça kullanışlıdır.

Aşağıdaki örnekte, fetch API kullanarak harici bir veri kaynağından sekmeleri nasıl oluşturabileceğinizi görebilirsiniz:

// tabs-data.json dosyası örneği
/*
[
  {"id": "tab1", "title": "Bölüm 1", "content": "İçerik 1"},
  {"id": "tab2", "title": "Bölüm 2", "content": "İçerik 2"}
]
*/

async function initDynamicTabs(containerId, dataUrl) {
  const container = document.getElementById(containerId);
  try {
    const response = await fetch(dataUrl);
    const data = await response.json();

    const tabList = document.createElement('div');
    tabList.className = 'tab-header';
    
    data.forEach((item, index) => {
      const btn = document.createElement('button');
      btn.innerText = item.title;
      btn.onclick = () => activateTab(item.id);
      tabList.appendChild(btn);
    });

    container.prepend(tabList);
  } catch (error) {
    console.error("Sekmeler yüklenirken hata oluştu:", error);
  }
}

Sekmeli Yapılarda Animasyon ve Geçiş Efektleri

Kullanıcı deneyimini iyileştirmek için sekmeler arası geçişlere CSS transition eklemek, arayüzün daha modern ve akıcı görünmesini sağlar. Sadece display: none kullanmak yerine, opacity ve transform özelliklerinden yararlanarak yumuşak geçişler oluşturabilirsiniz.

CSS ile Yumuşak Geçiş Uygulaması

Geçiş efektlerini uygulamak için içerik kapsayıcılarına transition özelliğini tanımlamanız yeterlidir. Aşağıdaki CSS bloğu, içeriğin yavaşça belirginleşmesini sağlar:

.tab-content {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: none;
}

.tab-content.active {
  display: block;
  opacity: 1;
}

Bu yaklaşımda, JavaScript tarafında sadece active sınıfını ekleyip çıkararak tarayıcının CSS geçişlerini otomatik olarak tetiklemesini sağlayabilirsiniz. Bu yöntem, JavaScript ile doğrudan stil manipülasyonu yapmaktan daha performanslıdır çünkü tarayıcı, CSS geçişlerini GPU üzerinde optimize edebilir.

Performans İpuçları

• Reflow'dan Kaçının: DOM manipülasyonlarını minimize edin. Mümkünse DocumentFragment kullanarak toplu ekleme yapın.
• Event Delegation: Her sekmeye ayrı bir addEventListener eklemek yerine, ana kapsayıcıya tek bir olay dinleyicisi atayarak event.target üzerinden kontrol sağlayın.
• Lazy Loading: Eğer sekmeler ağır içerikler (video, büyük görseller) barındırıyorsa, içeriği sadece sekme aktif olduğunda yükleyin.

Sonuç

JavaScript ile sekmeli içerik yapısı oluşturmak, modern web geliştirmede temel bir yetkinliktir. Bu rehberde, HTML iskeletinden başlayarak CSS ile görselleştirmeyi ve JavaScript ile dinamik bir etkileşim katmanı eklemeyi öğrendiniz. Kodunuzu her zaman temiz tutmaya, değişken isimlendirmelerinde tutarlı olmaya ve güvenlik standartlarını (özellikle XSS koruması) göz ardı etmemeye dikkat edin.

Yasal Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, özellikle kullanıcı girişi veya veri işleme içeren kısımlarda güvenlik denetimlerini yapmanız ve profesyonel yazılım güvenliği standartlarına uymanız gerekmektedir. Yazılım geliştirme süreçlerinde oluşabilecek veri kaybı veya güvenlik açıklarından kullanıcı sorumludur.

Bir sonraki adım olarak, sekmeler arasında geçiş yaparken yumuşak bir geçiş efekti (CSS transition) ekleyebilir veya verileri bir JSON dosyasından dinamik olarak çekerek sekmeleri otomatik oluşturmayı deneyebilirsiniz.