Paano gumawa: Tab

Aralan kung paano gumawa ng tab gamit ang CSS at JavaScript.

Lumikha ng nababagong tab

Unang hakbang - Magdagdag ng HTML:

<!-- Tag na pangngalaga ng link -->
<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>
<!-- Tag na pangngalaga ng nilalaman -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London ay kapital na siyudad ng Inglatera.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris ay ang kapital ng Pransya.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo ay ang kabisera ng bansang Hapon.</p>
</div>

Buwan ang mga button upang buksan ang partikular na content ng tab. Lahat ng may class="tabcontent" na <div> Ang lahat ng elemento ay nakahiding lamang (sa pamamagitan ng CSS at JS). Kapag may pindutin ng user ang button, ito ay magbukas ng content ng tab na nakatalaga sa button.

Ikalawa hakbang - Magdagdag ng CSS:

I-set ang estilo ng button at content ng tab:

/* I-set ang estilo ng tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* I-set ang estilo ng button na magbukas ng content ng tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* Palitan ang kulay ng background ng button kapag nasa hover */
.tab button:hover {
  background-color: #ddd;
}
/* Buwang klase ng link ng tab na aktibo/kasalukuyan */
.tab button.active {
  background-color: #ccc;
}
/* I-set na ang estilo ng content ng tab */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Ikatlong hakbang - Magdagdag ng JavaScript:

function openCity(evt, cityName) {
  // Idedeklara ang lahat ng variable
  var i, tabcontent, tablinks;
  // Makuha ang lahat ng elemento na may klase="tabcontent" at itago sila
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Makuha ang lahat ng elemento na may klase="tablinks" at alisin ang klase "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Ipakita ang kasalukuyang tab page at magdagdag ng klase "active" sa pindutan na binuksan ang tab page
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

亲自试一试

Pag淡化 ang tab page

Para sa pag淡化 ang nilalaman ng tab page, magdagdag ng sumusunod na CSS:

.tabcontent {
  animation: fadeEffect 1s; /* Ang epekto ng pag淡化 at pagpapanibagong anyo ay magtatagal ng 1 segundo */
}
/* Mula sa walang transparency hanggang buong transparency */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

亲自试一试

I-nilista ang tab page bilang default

Para buksan ang partikular na tab page kapag naglalagay ang pahina, gamitin ang JavaScript "click" sa tinalagang tab button:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// Hanapin ang elemento na may id="defaultOpen" at i-click ito
document.getElementById("defaultOpen").click();
</script>

亲自试一试

Isara ang tab page

Kung gusto mong isara ang partikular na tab page, gamitin ang JavaScript sa pamamagitan ng pag-click sa pindutan upang itago ang tab page:

<!-- Pag-click ang <span> elemento upang isara ang tab page -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London ay kapital na siyudad ng Inglatera.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>

亲自试一试

相关页面

教程：如何创建垂直标签页