CSS ve JavaScript ile Değiştirilebilir Sekmeler Oluşturmak...

ByESiNTi · 26 Tem 2021

Sekme Başlıkları
Uygun başlığı görüntülemek için "şehir" düğmelerine tıklayın:
CSS ve JavaScript ile sekme başlıklarının nasıl oluşturulacağını paylaşayım..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Resimdeki dikey sekme menüsünün tek parça kodlarını linkten indirebilirsiniz..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Değiştirilebilir Sekme Başlıkları Oluşturun

Adım 1) HTML'yi ekleyin:

Örnek:

Kod:

<div id="London" class="tabcontent">
  <h1>London</h1>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h1>Paris</h1>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h1>Tokyo</h1>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Oslo" class="tabcontent">
  <h1>Oslo</h1>
  <p>Oslo is the capital of Norway.</p>
</div>

<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>

Belirli sekme içeriğini açmak için düğmeler oluşturun. Tüm <div> öğeleri class="tabcontent"varsayılan olarak gizlidir (CSS ve JS ile). Kullanıcı bir düğmeye tıkladığında - bu düğmeyle "eşleşen" sekme içeriğini açacaktır.

Adım 2) CSS'yi ekleyin:

Düğmelere ve sekme içeriğine stil verin:

Örnek:

Kod:

/* Style the tab buttons */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

/* Change background color of buttons on hover */
.tablink:hover {
  background-color: #777;
}

/* Set default styles for tab content */
.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
}

/* Style each tab content individually */
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}

Adım 3) JavaScript'i ekleyin:

Örnek:

Kod:

function openCity(cityName, elmnt, color) {
  // Hide all elements with class="tabcontent" by default */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  // Show the specific tab content
  document.getElementById(cityName).style.display = "block";

  // Add the specific color to the button used to open the tab content
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();