Comment créer : Onglets

Apprendre à utiliser CSS et JavaScript pour créer des onglets sélectionnés.

Créer des onglets interchangeables

Étape 1 - Ajouter HTML :

<!-- Liens des onglets -->
<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>
<!-- Contenu de l'onglet -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris est la capitale de la France.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo shi de reng yuan of Japan.</p>
</div>

chuang jian an nui yi kai guan te zhong de biao qian ye nei rong。suo you dai you class="tabcontent" de <div> yuan su ming yuan dou shi yan shi de（tong guo CSS he JS）。dang yong hu dian ji an nui shi，ta jiang kai guan yu zhe ge an nui "pi pei" de biao qian ye nei rong。

di er bu - tian jia CSS：

she zhi an niu he biao qian ye nei rong de yi shi：

/* she zhi biao qian ye de yi shi */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* she zhi yong yu kai guan biao qian ye nei rong de an niu de yi shi */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* gai bian xuan heng shi shi biao tian de bei jing yan se */
.tab button:hover {
  background-color: #ddd;
}
/* chuang jian huodong/dang qian de biao qian lian lei */
.tab button.active {
  background-color: #ccc;
}
/* she zhi biao qian ye nei rong de yi shi */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

di san bu - tian jia JavaScript：

function openCity(evt, cityName) {
  // sheng ming suo you de bian lian
  var i, tabcontent, tablinks;
  // gan dama dake kai you class="tabcontent" de yuan su he yan shi tamen
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // gan dama dake kai you class="tablinks" de yuan su he shan chu lei "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Show the current tab and add the "active" class to the button that opens the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Zi jing shi shi yi yi

Fade in tab

To fade in the tab content, add the following CSS:

.tabcontent {
  animation: fadeEffect 1s; /* Fade in and out effect lasts 1 second */
}
/* From zero opacity to fully opaque */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

Zi jing shi shi yi yi

Default tab display

To open a specific tab when the page loads, use JavaScript to "click" the specified tab button:

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// Get the element with id="defaultOpen" and click it
document.getElementById("defaultOpen").click();
</script>

Zi jing shi shi yi yi

Close tab

If you want to close a specific tab, please use JavaScript by clicking the button to hide the tab:

<!-- 单击 <span> 元素来关闭标签页 -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>

Zi jing shi shi yi yi

Xiang guan ye mian

Jiao cheng:Kuwanan shi xian: zhong shi zheng lie tie