Miten luoda: Susi välilehdet

Opeta, miten käyttää CSS:ää ja JavaScriptiä välilehtien vaihtamiseen hiiren osoitettuina.

Luo hiirellä hoverattavat pystysuuntaiset välilehdet

Ensimmäinen vaihe - Lisää HTML:

<div class="tab">
  <button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
  <button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London on Englannin pääkaupunki.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris on Ranskan pääkaupunki.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo on Japanin pääkaupunki.</p>
</div>

Luo painikkeita, jotka avataan tiettyä välilehteä varten. Kaikki, joilla on class="tabcontent" jossa <div> Elementit ovat oletusarvoisesti piilotettuja (CSS ja JS avulla). Kun käyttäjä hoveraa painiketta, se avaa vastaavan välilehden sisällön.

Toinen vaihe - Lisää CSS:

Aseta painikkeen ja välilehden sisällön tyylit:

/* Määritä tyylit, jotka liittyvät välilehtiin */
.tab {
  uivu: vasen;
  reuna: 1px solmu #ccc;
  taustaväri: #f1f1f1;
  leveys: 30%;
  korkeus: 300px;
}
/* Määritä tyylit, jotka avataan painamalla tiettyä painiketta */
.tab button {
  näyttö: blokki;
  taustaväri: perinnäinen;
  väri: musta;
  sisennys: 22px 16px;
  leveys: 100%;
  raja: ei mitään;
  piirustus: ei mitään;
  tekstiasento: vasen;
  kursori: pointer;
}
/* Muuta painikkeen takabackgrund väriä hiiren osoittimen yllä */
.tab button:hover {
  takabackgrund: #ddd;
}
/* Luo aktiivinen/tämänhetkinen "välilehti-painike"-luokka */
.tab button.active {
  takabackgrund: #ccc;
}
/* Määritä välilehtien sisällön tyylit */
.tabcontent {
  uivu: vasen;
  tyhjennys: 0px 12px;
  reuna: 1px solmu #ccc;
  leveys: 70%;
  vasen reunus: ei mitään;
  korkeus: 300px;
  display: none;
}

Vaihe kolme - Lisää JavaScript:

function openCity(evt, cityName) {
  // Määritä kaikki muuttujat
  var i, tabcontent, tablinks;
  // Hae kaikki elementit, joilla on luokka "tabcontent" ja piilota ne
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Hae kaikki elementit, joilla on luokka "tablinks" ja poista niiltä luokka "aktiivinen"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" aktiivinen", "");
  }
  // Näytä nykyinen välilehti ja lisää "aktiivinen"-luokka avattavaan välilehtilinkkiin
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " aktiivinen";
}

Kokeile itse

Liittyvät sivut

Oppitunti:Miten luoda välilehdet