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

ByESiNTi · 26 Tem 2021

CSS ve JavaScript ile nasıl sekme (Tabs) oluşturacağınızı göstereceğim..

Sekmeler

Sekmeler, tek sayfa web uygulamaları veya farklı konuları görüntüleyebilen web sayfaları için mükemmeldir:

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

Aşağıda verdiğim linkten sekmeler (Taps) kodunu tek parça indirebilirsiniz..

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

Değiştirilebilir Sekmeler Oluşturun

Adım 1) HTML'yi ekleyin:

Örnek:

Kod:

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

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

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

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 */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Adım 3) JavaScript'i ekleyin:

Örnek:

Kod:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Sekmelerde Soldurma:
Sekme içeriğinin solmasını istiyorsanız, aşağıdaki CSS'yi ekleyin:

Örnek:

Kod:

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

Varsayılan olarak bir sekme göster

Sayfa yüklendiğinde belirli bir sekmeyi açmak için, belirtilen sekme düğmesine "tıklamak" için JavaScript'i kullanın:

Aşağıda verdiğim linkten indirin:

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

Bir sekmeyi kapat

Belirli bir sekmeyi kapatmak istiyorsanız, bir düğmeyi tıklayarak sekmeyi gizlemek için JavaScript'i kullanın:

Örnek:

Kod:

<!-- Click on the <span> element to close the tab -->

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>