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

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için temel düzeyde HTML, CSS ve JavaScript bilginizin olması yeterlidir. Herhangi bir derleyiciye veya karmaşık kurulum sürecine ihtiyaç yoktur; modern bir metin editörü (VS Code gibi) ve herhangi bir web tarayıcısı (Chrome, Firefox, Edge) ile çalışmaya başlayabilirsiniz.

• HTML5: İçerik yapısını tanımlamak için.
• CSS3: Görünürlük yönetimi ve stil için.
• JavaScript (ES6+): Etkileşim ve mantıksal geçişler için.

Kodlarınızı yazarken tarayıcı konsolunu (F12) açık tutmanız, hata ayıklama (debugging) sürecini hızlandıracaktır.

Adım 1: HTML Yapısını Oluşturma

Sekmeli içerik yapısının temelinde, butonlardan oluşan bir navigasyon alanı ve bu butonlara karşılık gelen içerik panelleri bulunur. HTML tarafında semantik etiketler kullanmak, hem SEO hem de erişilebilirlik açısından kritiktir.

  

    Sekme 1
    Sekme 2
    Sekme 3
  
  

    
İçerik 1: Burası ilk sekme.
    
İçerik 2: Burası ikinci sekme.
    
İçerik 3: Burası üçüncü sekme.
  

Burada data-target özniteliği, JavaScript ile hangi panelin açılacağını belirlememize yarayan anahtar bir değerdir. active sınıfı ise o an görünür olan öğeyi işaretler.

Adım 2: CSS ile Görünürlüğü Yönetme

JavaScript ile sadece sınıfları (class) değiştireceğiz, ancak görünürlük mantığını CSS ile yöneteceğiz. Bu, performansı artırır ve tarayıcının yeniden boyama (repaint) işlemlerini optimize eder.

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-btn.active { border-bottom: 2px solid blue; font-weight: bold; }

display: none özelliği, aktif olmayan panellerin DOM üzerinde var olmalarına rağmen ekranda yer kaplamamasını sağlar.

Adım 3: JavaScript ile Mantığı Kurma

Şimdi butonlara tıklanıldığında ilgili paneli aktif eden JavaScript kodunu yazalım. Bu kod, mevcut tüm active sınıflarını temizler ve tıklanan öğeye bu sınıfı ekler.

const buttons = document.querySelectorAll('.tab-btn');
const panels = document.querySelectorAll('.tab-panel');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    // Tüm butonlardan ve panellerden active sınıfını kaldır
    buttons.forEach(b => b.classList.remove('active'));
    panels.forEach(p => p.classList.remove('active'));

    // Tıklanan butona ve ilgili panele active ekle
    btn.classList.add('active');
    const target = btn.getAttribute('data-target');
    document.getElementById(target).classList.add('active');
  });
});

Bu yöntem, forEach döngüsü ile tüm elemanları sıfırlayıp sadece seçileni aktif ettiği için oldukça güvenilir ve temiz bir yaklaşımdır.

Adım 4: Performans ve Güvenlik İpuçları

Sekmeli içeriklerde en yaygın hata, DOM üzerinde gereksiz işlem yapmaktır. Çok sayıda sekmeniz varsa, olay dinleyicilerini (event listeners) her butona tek tek eklemek yerine "Event Delegation" (Olay Delegasyonu) yöntemini kullanmalısınız.

document.querySelector('.tab-header').addEventListener('click', (e) => {
  if (e.target.classList.contains('tab-btn')) {
    // İşlem mantığı buraya gelir
    console.log("Sekme değiştirildi: ", e.target.dataset.target);
  }
});

Güvenlik Uyarısı: Kullanıcıdan gelen verileri veya dinamik içerikleri sekmelere yüklerken innerHTML kullanmak XSS (Cross-Site Scripting) saldırılarına yol açabilir. Dinamik içerik eklemeniz gerekiyorsa textContent kullanın veya veriyi mutlaka sterilize edin.

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

Sıkça Sorulan Sorular

Sekmeli içeriklerde SEO kaybı yaşar mıyım?

Eğer içerik HTML içerisinde mevcutsa ve sadece CSS ile gizlenmişse, arama motorları bu içeriği tarayabilir. Google, gizli içerikleri dizine ekleme konusunda oldukça başarılıdır.

Çok sayıda sekme olduğunda ne yapmalıyım?

Sekme sayısı arttığında yatay kaydırma (horizontal scroll) veya açılır menü (dropdown) yapısına geçiş yapmanız kullanıcı deneyimini koruyacaktır.

JavaScript devre dışı bırakılırsa ne olur?

İçeriklerin varsayılan olarak açık kalmasını veya ilk sekmenin görünür olmasını sağlayarak "graceful degradation" (kademeli bozulma) prensibini uygulayabilirsiniz.

Aynı sayfada birden fazla sekmeli yapı olabilir mi?

Evet, ancak kodunuzda querySelectorAll kullanırken kapsayıcı (container) sınıflarını spesifikleştirmeniz gerekir.

Mobil cihazlarda nasıl görünmeli?

Mobil ekranlarda butonları dikey dizmek veya bir "select" menüsüne dönüştürmek, tıklanabilirlik açısından daha verimlidir.

İleri Seviye İpuçları: Kullanıcı Deneyimini İyileştirme

Sekmeli içerik yapınızı bir adım öteye taşımak, kullanıcıların sayfadaki etkileşimini artırır. Özellikle "localStorage" kullanarak kullanıcının en son hangi sekmede kaldığını tarayıcı hafızasına kaydetmek, sayfa yenilendiğinde kullanıcıyı aynı noktada karşılamanızı sağlar.

Aşağıdaki kod örneği, aktif sekme indeksini tarayıcıya kaydeder ve sayfa yüklendiğinde bu değeri okuyarak ilgili sekmeyi otomatik olarak aktif hale getirir:

// Sekme değişimini kaydetme
function saveActiveTab(index) {
  localStorage.setItem('activeTab', index);
}

// Sayfa yüklendiğinde kaydedilen sekmeyi açma
window.addEventListener('DOMContentLoaded', () => {
  const savedTab = localStorage.getItem('activeTab');
  if (savedTab !== null) {
    activateTab(savedTab); // Mevcut sekme değiştirme fonksiyonunuz
  }
});

Sekmeli İçeriklerde Hata Ayıklama ve Test Süreçleri

Karmaşık projelerde sekmeli yapıların düzgün çalışmaması genellikle CSS çakışmaları veya JavaScript seçici hatalarından kaynaklanır. Hata ayıklama sürecinde şu adımları izlemek, süreci hızlandıracaktır:

• Konsol Logları: Sekme tıklamalarının tetiklenip tetiklenmediğini anlamak için console.log() kullanarak olay dinleyicilerinizi kontrol edin.
• DOM İnceleme: Tarayıcınızın "Geliştirici Araçları" (F12) kısmından active sınıfının doğru elemente atanıp atanmadığını canlı olarak gözlemleyin.
• Erişilebilirlik Testi: Klavye ile sekme geçişi yaparken (Tab tuşu) odak halkasının (focus ring) görünüp görünmediğini test edin. outline: none kullanıyorsanız, mutlaka :focus durumları için alternatif bir stil tanımlayın.

Klavye Navigasyonu ve Erişilebilirlik (A11y)

Sekmeli içeriklerin sadece fare ile değil, klavye ile de yönetilebilir olması gerekir. Kullanıcıların ok tuşlarını kullanarak sekmeler arasında geçiş yapabilmesi, standart bir web erişilebilirlik gereksinimidir.

// Klavye ile sekme geçişi örneği
tabButtons.forEach((btn, index) => {
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      const nextTab = tabButtons[index + 1] || tabButtons[0];
      nextTab.focus();
      nextTab.click();
    } else if (e.key === 'ArrowLeft') {
      const prevTab = tabButtons[index - 1] || tabButtons[tabButtons.length - 1];
      prevTab.focus();
      prevTab.click();
    }
  });
});

Bu yöntem, özellikle görme engelli kullanıcılar veya klavye odaklı çalışan profesyoneller için sitenizin kullanılabilirliğini ciddi oranda artıracaktır. Kodunuzu her zaman WAI-ARIA standartlarına uygun şekilde (role="tablist", role="tab", role="tabpanel") yapılandırmaya özen gösterin.

Sonuç

JavaScript ile sayfa içinde sekmeli içerik yapısı nasıl yapılır sorusunu, en temiz ve performanslı yöntemlerle ele aldık. Bu yapı, kullanıcı arayüzünüzü düzenlemek için harika bir başlangıçtır. Bir sonraki adım olarak, bu yapıya animasyonlar ekleyebilir veya sekmeler arası geçişlerde localStorage kullanarak kullanıcının kaldığı sekmeyi hatırlamasını sağlayabilirsiniz.

Kod güvenliği sorumluluk reddi: Paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanırken, kullanıcı girdilerini doğruladığınızdan ve modern güvenlik standartlarına (CSP gibi) uyduğunuzdan emin olun.