SemihDeniz adlı üyeden alıntı

Bunun gibi bir şey istiyorum.Yardımcı olur musunuz?

<div class="tab-menu">
  <ul class="tabs">
    <li class="active" data-tab="tab1">Örnek Flim 1</li>
    <li data-tab="tab2">Örnek Flim 2</li>
  </ul>

  <div class="tab-content active" id="tab1">
  <div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
  <div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
<div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
  </div>
  <div class="tab-content" id="tab2">
<div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div><div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
  </div>
</div>

<style>
.tab-menu {
  font-family: Arial, sans-serif;
}
.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  border-bottom: 2px solid #ccc;
}
.tabs li {
  padding: 10px 20px;
  cursor: pointer;
  background: #eee;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
}
.tabs li.active {
  background: #fff;
  border-bottom: 2px solid white;
  font-weight: bold;
}
.tab-content {
  display: none;
  padding: 20px;
  background: #fff;
  border: 2px solid #ccc;
  border-top: none;
}
.tab-content.active {
  display: block;
}
.bolum-listesi {
  width: 100%;
  font-family: Arial, sans-serif;
}
.bolum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #000;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s ease;
}
.bolum:hover {
  background-color: #f9f9f9;
}
.bilgi {
  font-size: 14px;
}
.indir img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.bolum:hover .indir img {
  transform: scale(1.2);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const tabs = document.querySelectorAll(".tabs li");
  const contents = document.querySelectorAll(".tab-content");

  tabs.forEach(tab => {
    tab.addEventListener("click", function() {
      tabs.forEach(t => t.classList.remove("active"));
      contents.forEach(c => c.classList.remove("active"));

      this.classList.add("active");
      const tabId = this.getAttribute("data-tab");
      document.getElementById(tabId).classList.add("active");
    });
  });
});
</script>