Sekmeli İçerik (Tab Component) – JavaScript ile Sekme Geçişi - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

Nefret · 09 Mayıs 2025, 00:39

Merhaba,
Bu örnekte JavaScript ile dinamik olarak çalışan sekmeli içerik sistemi (tab switching) yaptım. Kullanıcılar sekmelere tıkladıkça içerik değişiyor, diğer içerikler gizleniyor.
Bu yapı genellikle panellerde, ürün detay sayfalarında veya SSS bölümlerinde çok işe yarar.
Kodlar sade ve modüler. Yeni sekmeler eklemek çok kolay. Geliştirme önerilerinize açığım!

Kod: Kodu kopyalamak için üzerine çift tıklayın!

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Sekmeli İçerik</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
      background-color: #f9f9f9;
    }

    .tabs {
      display: flex;
      margin-bottom: 10px;
    }

    .tab {
      padding: 10px 20px;
      cursor: pointer;
      background-color: #eee;
      margin-right: 5px;
      border-radius: 5px 5px 0 0;
    }

    .tab.active {
      background-color: #fff;
      border-bottom: 2px solid white;
    }

    .tab-content {
      border: 1px solid #ccc;
      padding: 20px;
      background-color: white;
      border-radius: 0 5px 5px 5px;
    }

    .content {
      display: none;
    }

    .content.active {
      display: block;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <div class="tab active" data-target="tab1">Hakkında</div>
    <div class="tab" data-target="tab2">Hizmetler</div>
    <div class="tab" data-target="tab3">İletişim</div>
  </div>

  <div class="tab-content">
    <div id="tab1" class="content active">Bu, "Hakkında" sekmesinin içeriğidir.</div>
    <div id="tab2" class="content">Burada sunduğumuz hizmetleri bulabilirsiniz.</div>
    <div id="tab3" class="content">Bizimle iletişime geçmek için bu alanı kullanın.</div>
  </div>

  <script>
    const tabs = document.querySelectorAll(".tab");
    const contents = document.querySelectorAll(".content");

    tabs.forEach(tab => {
      tab.addEventListener("click", () => {
        // Tüm sekmelerin ve içeriklerin aktifliğini kaldır
        tabs.forEach(t => t.classList.remove("active"));
        contents.forEach(c => c.classList.remove("active"));

        // Seçilen sekmeyi ve ilgili içeriği aktif yap
        tab.classList.add("active");
        document.getElementById(tab.dataset.target).classList.add("active");
      });
    });
  </script>

</body>
</html>

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
COMPONENT	vioLeta	Bilgisayar Sözlüğü	0	06 Ekim 2019 05:09
Sekmeli Kullanıcı Profili	Cry	PhpBB	0	05 Eylül 2011 13:14
Sekme(tab) Geçişleri	Spaw67	mIRC Scripting Sorunları	6	14 Mart 2009 18:21

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Etiketlemek istediğiniz kullanıcılar arasına virgül koyunuz. Örnek: nokta,sukunet,NucLear

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.