Hoe te maken: Tabbladen

Leer hoe je tabbladen maakt met CSS en JavaScript.

Maak een schakelbare tabblad

Eerste stap - Voeg HTML toe:

<!-- 标签页链接 -->
<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>
<!-- 标签页内容 -->
<div id="London" class="tabcontent">
  <h3>Londen</h3>
  <p>Londen is de hoofdstad van Engeland.</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 de hoofdstad van Japan.</p>
</div>

Maak knoppen om specifieke tabbladinhoud te openen. Alle elementen met class="tabcontent" met <div> Elementen zijn standaard verborgen (door CSS en JS). Wanneer de gebruiker op de knop klikt, opent deze de tabbladinhoud die bij de knop "matches".

Tweede stap - Voeg CSS toe:

Stel de stijl van de knop en de tabbladinhoud in:

/* Stel het stijl van de tab in */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* Stel het stijl van de knop in die de tabbladinhoud opent */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* Verander de achtergrondkleur van de knop bij hover */
.tab button:hover {
  background-color: #ddd;
}
/* Maak een klasse voor de actieve/actuele tablink */
.tab button.active {
  background-color: #ccc;
}
/* Stel het stijl van de tabbladinhoud in */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Derde stap - Voeg JavaScript toe:

function openCity(evt, cityName) {
  // Verklaren van alle variabelen
  var i, tabcontent, tablinks;
  // Verwijder de klasse "tabcontent" van alle elementen met class="tabcontent"
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Verwijder de klasse "tablinks" van alle elementen met class="tablinks"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Toon het huidige tabblad en voeg de "active" klasse toe aan de knop die het tabblad opent
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Try it yourself

Inzoomen op tabblad

Om de inhoud van het tabblad in te zoomen, voeg de volgende CSS toe:

.tabcontent {
  animation: fadeEffect 1s; /* Het in- en uitschakelen van het effect duurt 1 seconde */
}
/* Van nul doorschijnend overgaan naar volledig doorschijnend */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

Try it yourself

Standaard tabblad weergeven

Om een specifiek tabblad te openen bij het laden van de pagina, gebruik dan JavaScript om de knop van het specifieke tabblad te klikken:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">Londen</button>
<script>
// Haal het element met id="defaultOpen" op en klik erop
document.getElementById("defaultOpen").click();
</script>

Try it yourself

Tabblad sluiten

Als je een specifiek tabblad wilt sluiten, gebruik dan JavaScript om het tabblad te verbergen door op de knop te klikken:

<!-- Klik op het <span> element om het tabblad te sluiten -->
<div id="London" class="tabcontent">
  <h3>Londen</h3>
  <p>Londen is de hoofdstad van Engeland.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>

Try it yourself

Related pages

Tutorial:How to create vertical tabs