如何创建：标签页

学习如何使用 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>
<!-- 标签页内容 -->
<div id="London" class="tabcontent">
  <h3>لندن</h3>
  <p>لندن پایتخت انگلستان است.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

دکمه‌هایی ایجاد کنید تا محتوای برگه خاصی را باز کنند. تمام موارد دارای class="tabcontent" در <div> عناصر به طور پیش‌فرض مخفی هستند (از طریق CSS و JS). هنگامی که کاربر روی دکمه کلیک می‌کند، محتوای برگه مرتبط با آن دکمه باز می‌شود.

مرحله دوم - اضافه کردن CSS:

تنظیمات استایل دکمه و محتوای برگه:

/* تنظیمات استایل برگه */
.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;
}

مرحله سوم - اضافه کردن JavaScript:

function openCity(evt, cityName) {
  // تمام متغیرها را تعریف کنید
  var i, tabcontent, tablinks;
  // به تمام عناصر دارای class="tabcontent" دسترسی پیدا کنید و آنها را مخفی کنید
  tabcontent = document.getElementsByClassName("tabcontent");
  برای (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">لندن</button>
<script>
// عناصر با id="defaultOpen" را دریافت کرده و روی آن‌ها کلیک می‌کند
document.getElementById("defaultOpen").click();
</script>

آزمایش کنید

بستن برگه

اگر می‌خواهید برگه خاصی را ببندید، لطفاً از JavaScript با کلیک بر روی دکمه آن برگه را پنهان کنید:

<!-- کلیک بر روی <span> برای بستن برگه -->
<div id="London" class="tabcontent">
  <h3>لندن</h3>
  <p>لندن پایتخت انگلستان است.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>

آزمایش کنید

صفحات مرتبط

آموزش‌ها:چگونه به عمل آوریم: ایجاد تگ‌های برچسب عمودی