如何创建：标签页

学习如何使用 CSS 和 JavaScript 创建选标签页。

标签页

标签页非常适合单页 Web 应用程序或能够显示不同主题的网页：

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

亲自试一试

创建可切换的标签页

第一步 - 添加 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 id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p>
<div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p>

ဖန်တီး အချက်အလက် ကို ဖွင့်ခြင်း class="tabcontent" သည် <div> အရာများ အများစု ဖုံးဖြို့ခြင်း ဖြင့် (ပုံစံ နှင့် သိပ္ပံ)၊ အသုံးပြုသူ သည် အချက်အလက် ကို စွန့်ပေါင်းခြင်း

နောက်ပိုင်း ပုံစံ - ပုံစံ ကို အသုံးပြုခြင်း

ပုံစံ နှင့် ပုံစံ ကို စစ်ဆေးခြင်း

/* ပုံစံ ကို အသုံးပြုခြင်း */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* ပုံစံ ကို အသုံးပြုခြင်း */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* ကွေးကွေး ဖြစ်စဉ် ပုံစံ ကို ပြောင်းလဲခြင်း */
.tab button:hover {
  background-color: #ddd;
}
/* လက်တွေ့/လက်ဆင့် ပုံစံ ပုံစံ ကို ဖန်တီးခြင်း */
.tab button.active {
  background-color: #ccc;
}
/* ချက်ပြင် အောက်ပုံစံ ကို တခုတည်းဖြင့် စစ်ဆေးခြင်း */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

သတ်မှတ် ပုံစံ - ဂျာမိုကရော် ကို အသုံးပြုခြင်း

function openCity(evt, cityName) {
  // အများပြားသော ဘာသာပြန်မှု ကို တက်ကြွခြင်း
  var i, tabcontent, tablinks;
  // ပြည့်စွမ်းသော class="tabcontent" ပုံစံ အရာများ ကို ဖုံးဖြို့ခြင်း
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // ပြည့်စွမ်းသော class="tablinks" ပုံစံ အရာများ ကို ဖြတ်တောက်ခြင်း "active" ပုံစံ
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 显示当前标签页，并向打开该标签页的按钮添加 "active" 类
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

亲自试一试

淡入标签页

如果要淡入标签页内容，请添加以下 CSS：

.tabcontent {
  animation: fadeEffect 1s; /* 淡入淡出效果持续 1 秒 */
}
/* 从零透明度过渡到完全不透明 */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

亲自试一试

默认显示标签页

要在页面加载时打开特定标签页，请使用 JavaScript “单击”指定的标签页按钮：

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// 获取 id="defaultOpen" 的元素并点击它
document.getElementById("defaultOpen").click();
</script>

亲自试一试

关闭标签页

如果您想关闭特定标签页，请使用 JavaScript 通过单击按钮来隐藏该标签页：

<!-- 单击 <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>

亲自试一试

相关页面

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