Jak stworzyć: zakładki najedzenia

Naucz się, jak używać CSS i JavaScript do przełączania zakładek przy najechaniu.

Tokyo jest stolicą Japonii.

Stwórz pionowe zakładki do nawigacji

Krok 1 - Dodaj HTML:
  <div class="tab">
  <button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
  <button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<p>Tokyo jest stolicą Japonii.</p>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
  <div id="London" class="tabcontent">
  <h3>London</h3>
<p>Tokyo jest stolicą Japonii.</p>
<p>London jest stolicą Anglii.</p>
  <div id="Paris" class="tabcontent">
  <h3>Paris</h3>
<p>Tokyo jest stolicą Japonii.</p>
<p>Paris jest stolicą Francji.</p>
  <div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
<p>Tokyo jest stolicą Japonii.</p>

</div> Stwórz przyciski otwierające określoną zawartość zakładki. Wszystkie elementy z klasą klasa="tabcontent" <div> Elementy są domyślnie ukryte (przez CSS i JS). Kiedy użytkownik wskaże myszą na przycisk, otworzy się zawartość zakładki "pasująca" do tego przycisku.

Krok 2 - Dodaj CSS:

Ustawienia stylu przycisków i zawartości zakładki:

/* Ustawienia stylu zakładki */
.tab {
  float: left;
  border: 1px solid #ccc;
  kolor-tła: #f1f1f1;
  szerokość: 30%;
  height: 300px;
}
/* Ustawienia stylu przycisku otwierającego zawartość zakładki */
.tab button {
  wyświetlanie: blok;
  kolor-tła: dziedziczy;
  kolor: czarny;
  wypełnienie: 22px 16px;
  szerokość: 100%;
  brzeg: brak;
  outline: none;
  text-align: left;
  cursor: pointer;
}
/* Zmień kolor tła przycisku przy najechaniu myszą */
.tab button:hover {
  background-color: #ddd;
}
/* Utwórz klasę "aktywna/obecna" dla przycisku zakładki */
.tab button.active {
  background-color: #ccc;
}
/* Ustaw styl zawartości zakładki */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none;
}

Krok trzeci - Dodaj JavaScript:

function openCity(evt, cityName) {
  // Deklaruj wszystkie zmienne
  var i, tabcontent, tablinks;
  // Pobierz wszystkie elementy z klasą "tabcontent" i ukryj je
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Pobierz wszystkie elementy z klasą "tablinks" i usuń klasę "aktywna"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" aktywna", "");
  }
  // Wyświetl bieżącą zakładkę i dodaj klasę "aktywna" do linku otwierającego zakładkę
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " aktywna";
}

Spróbuj sam

Strony związane

Tutorial:Jak stworzyć zakładki