Miten luoda: pystysuuntaiset välilehdet

Opi, miten voit luoda pystysuuntaisia välilehti-valikon CSS:llä ja JavaScriptillä.

Luo vaihdettavat pystysuuntaiset välilehdet

Ensimmäinen vaihe - Lisää HTML:

<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>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 avataan tiettyä välilehteä sisältöä. Kaikki, joilla on class="tabcontent" on <div> Elementit ovat oletusarvoisesti piilotettuja (CSS ja JS avulla). Kun käyttäjä napsauttaa painiketta, se avaa vastaavan painikkeen välilehden sisällön.

Toinen vaihe - Lisää CSS:

Määritä painikkeen ja välilehden sisällön tyylit:

* {box-sizing: border-box}
/* Tyylitä välilehdet */
.tab {
  liukuu: vasen;
  reuna: 1px solid #ccc;
  arkkiVäri: #f1f1f1;
  leveys: 30%;
  korkeus: 300px;
}
/* Määritä tyylit, jotka käytetään avataan välilehdet sisältöä painiketta */
.tab button {
  näyttö: block;
  arkkiVäri: perittynyt;
  väri: musta;
  pADDING: 22 px 16 px;
  leveys: 100%;
  reuna: ei mitään;
  reuna: ei mitään;
  tekstiasento: vasen;
  sormenjälki: osoitin;
  siirtymä: 0.3s;
}
/* Muuta hiiren osoittimen yllä olevan painikkeen taustaväri */
.tab button:hover {
  taustaväri: #ddd;
}
/* Luo aktiivinen/tämänhetkinen "välilehti-painike"-luokka */
.tab button.aktiivinen {
  taustaväri: #ccc;
}
/* Määritä välilehdien sisällön tyylit */
.tabcontent {
  liukuu: vasen;
  sisennys: 0px 12px;
  reuna: 1px solid #ccc;
  leveys: 70%;
  vasen reunus: ei mitään;
  korkeus: 300px;
}

Vaihe kolme - Lisää JavaScript:

function openCity(evt, cityName) {
  // Määritä kaikki muuttujat
  var i, tabcontent, tablinks;
  // Hae kaikki elementit, joilla on class="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 class="tablinks" ja poista "aktiivinen"-luokka
  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 avattuun välilehtilinkkiin
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " aktiivinen";
}

Kokeile itse

Liittyvät sivut

Oppitunnit:Miten luoda: Horisontaalinen välilehdet