آموزش ساخت تب افقی و عمودی HTML

آخرین بروزرسانی 7 آبان 1402

تب های ابزاری عالی در رابط کاربری، جهت نمایش اطلاعات به صورت مجزا و طبقه بندی شده بر اساس یک سر دسته خاص هستند. در آموزش کوتاه و کاربردی امروز، قصد داریم نحوه ساخت زبانه یا تب های افقی و عمودی را با بهره گیری از HTML، CSS و Javascript مورد بررسی قرار دهیم. از شما دعوت میکنیم در ادامه با مسترکد همراه شوید.

ساخت تب افقی

در کلیه بخش ها، ساختار تب هایی که میسازیم به سه بخش تقسیم میشود، بخش اول ساختار و کد HTML تب ها و بخش های بعدی، استایل های CSS و کد جاوااسکریپت تب ها هستند. ساختار HTML تب ها به شرح زیر خواهد بود :

<div class="tab">
  <button class="tablinks" onclick="openMyTab(event, 'Description')">Description</button>
  <button class="tablinks" onclick="openMyTab(event, 'Technical')">Technical</button>
  <button class="tablinks" onclick="openMyTab(event, 'Support')">Support</button>
</div>

<div id="Description" class="tabcontent">
  <h3>Description</h3>
  <p>This is a "Great" product.</p>
</div>

<div id="Technical" class="tabcontent">
  <h3>Technical</h3>
  <p>Some technical info goes here.</p> 
</div>

<div id="Support" class="tabcontent">
  <h3>Support</h3>
  <p>This is how we provide support.</p>
</div>

<button class="tablinks" onclick="openMyTab(event, 'Description')">Description</button>

<button class="tablinks" onclick="openMyTab(event, 'Technical')">Technical</button>

<button class="tablinks" onclick="openMyTab(event, 'Support')">Support</button>

</div>

<h3>Description</h3>

<p>This is a "Great" product.</p>

</div>

<h3>Technical</h3>

<p>Some technical info goes here.</p>

</div>

<h3>Support</h3>

<p>This is how we provide support.</p>

</div>

در بالا ابتدا سه زبانه ایجاد کرده ایم و سپس محتوای دلخواه را جهت نمایش در آنها جایگذاری کرده ایم.

بخش بعدی که به آن احتیاج داریم، کد های CSS ماست که نحوه نمایش این زبانه ها را معین خواهد کرد :

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style the tab */

.tab {

overflow: hidden;

border: 1px solid #ccc;

background-color: #f1f1f1;

}

/* Style the buttons that are used to open the tab content */

.tab button {

background-color: inherit;

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

transition: 0.3s;

}

/* Change background color of buttons on hover */

.tab button:hover {

background-color: #ddd;

}

/* Create an active/current tablink class */

.tab button.active {

background-color: #ccc;

}

/* Style the tab content */

.tabcontent {

display: none;

padding: 6px 12px;

border: 1px solid #ccc;

border-top: none;

}

بدیهی است این استایل ها را میتوانید بر اساس سلیقه خود و با توجه به رابط کاربری ای که در آن از این تب ها استفاده میکنید، ویرایش کرده و تغییر دهید.

در مرحله آخر، کد جاوااسکریپت مورد نیاز جهت تغییر، نمایش و مخفی سازی تب ها را اضافه میکنیم :

function openMyTab(evt, myTabName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "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 an "active" class to the button that opened the tab
  document.getElementById(myTabName).style.display = "block";
  evt.currentTarget.className += " active";
}

function openMyTab(evt, myTabName) {

// Declare all variables

var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

// Get all elements with class="tablinks" and remove the class "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 an "active" class to the button that opened the tab

document.getElementById(myTabName).style.display = "block";

evt.currentTarget.className += " active";

}

این سه بخش کد، به سادگی شما را به یک ساختار تب ساده و در عین حال کاربردی خواهد رساند. نمونه آماده این تب ها را میتوانید در فایل tabs.html که در پکیج فایل های تمرین در انتهای این مطلب درج شده مشاهده کنید.

ساخت تب های پدیدار شونده (Fade in)

تب هایی که در بخش قبل ایجاد کردیم، هرچند کامل هستند اما در صورت رفتن از یک تب به تب دیگر، تغییر محتوا بین آنها ناگهانی است که از زیبایی نمایش محتوا خواهد کاست. در این مرحله میخواهیم کاری کنیم که محتوا به آرامی در تب پدیدار شود. برای این کار کافی است کد زیر را به بخش استایل های خود اضافه کنیم.

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.tabcontent {

animation: fadeEffect 1s; /* Fading effect takes 1 second */

}

/* Go from zero to full opacity */

@keyframes fadeEffect {

from {opacity: 0;}

to {opacity: 1;}

}

نمونه نحوه نمایش محتوا به صورت پدیدار شونده را میتوانید در فایل tabs-fadein.html در فایل های نمونه پروژه در انتهای این مطلب مشاهده کنید.

انتخاب و نمایش یک زبانه به صورت پیشفرض

در این مرحله میخواهیم کاری کنیم که محتوای یکی از تب ها به صورت پیشفرض برای کاربر به نمایش در بیاید. مثلا شاید بخواهید در بین تب ها، آخرین تب یا زبانه ای که حاوی اطلاعاتی مهم تر نسبت به سایر زبانه هاست را برای کاربر به نمایش بگذارید.

برای این کار باید با کمک جاوااسکریپت روی تب دلخواه کلیک کنیم. به کد زیر توجه کنید :

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

<button class="tablinks" onclick="openMyTab(event, 'Support')" id="defaultOpen">Support</button>

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

</script>

در این حالت تب مورد نظر را با id دلخواه مشخص کرده و سپس با استفاده از جاوااسکریپت، آن id را مورد هدف قرار گرفته و روی آن کلیک کرده ایم تا تب فعال شود. نمونه انتخاب تب پیشفرض را میتونید در فایل tabs-select-by-default.html که در فایل های آماده این آموزش در انتهای مطلب درج شده مشاهده نمایید.

اضافه کردن قابلیت بستن به تب ها

برای بستن محتوای تب ها نیز میتوانیم به سادگی از جاوااسکریپت استفاده کنیم :

<div id="Support" class="tabcontent">
  <h3>Support</h3>
  <p>This is how we provide support.</p>
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
</div>

<h3>Support</h3>

<p>This is how we provide support.</p>

<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

</div>

در ادامه میتوانید در بخش استایل های CSS خود، نحوه نمایش دکمه ضربدر بستن و محل قرار گیری آن را نیز تعییر کنید. نمونه این نوع دکمه را میتوانید در فایل tabs-close-button.html ارائه شده در انتهای همین آموزش مشاهده کنید.

ساخت تب عمودی

تب های عمودی نیز به طور کلی ساختار مشابهی با ساختار تب های افقی دارند. مانند بخش قبل، برای ساختن این نوع زبانه نیاز به سه بخش کد، شامل ساختار HTML، کد استایل و جاوااسکریپت به شرح زیر داریم :

ساختار اچ تی ام ال زبانه ها به شرح زیر خواهد بود :

<div class="tab">
  <button class="tablinks" onclick="openMyTab(event, 'Description')" id="defaultOpen">Description</button>
  <button class="tablinks" onclick="openMyTab(event, 'Support')">Support</button>
  <button class="tablinks" onclick="openMyTab(event, 'Technical')">Technical</button>
</div>

<div id="Description" class="tabcontent">
  <h3>Description</h3>
  <p>This is a "Great" product.</p>
</div>

<div id="Support" class="tabcontent">
  <h3>Support</h3>
  <p>Some technical info goes here.</p> 
</div>

<div id="Technical" class="tabcontent">
  <h3>Technical</h3>
  <p>This is how we provide support.</p>
</div>

<button class="tablinks" onclick="openMyTab(event, 'Description')" id="defaultOpen">Description</button>

<button class="tablinks" onclick="openMyTab(event, 'Support')">Support</button>

<button class="tablinks" onclick="openMyTab(event, 'Technical')">Technical</button>

</div>

<h3>Description</h3>

<p>This is a "Great" product.</p>

</div>

<h3>Support</h3>

<p>Some technical info goes here.</p>

</div>

<h3>Technical</h3>

<p>This is how we provide support.</p>

</div>

مطابق بخش های قبل، برای ساختن هر تب از botton ها استفاده کرده ایم. به div ها کلاس tabcontent را اختصاص داده و بعد آنها را با استفاده از css و جاوااسکریپت مختفی مکنیم. وقتی کاربر روی یکی از دکمه ها کلیک کند، تب مربوط به آن دکمه باز خواهد شد.

مرحله بعدی اضافه کردن استایل های مورد نیاز است :

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}

/* Style the tab */

.tab {

float: left;

border: 1px solid #ccc;

background-color: #f1f1f1;

width: 30%;

height: 300px;

}

/* Style the buttons inside the tab */

.tab button {

display: block;

background-color: inherit;

color: black;

padding: 22px 16px;

width: 100%;

border: none;

outline: none;

text-align: left;

cursor: pointer;

transition: 0.3s;

font-size: 17px;

}

/* Change background color of buttons on hover */

.tab button:hover {

background-color: #ddd;

}

/* Create an active/current "tab button" class */

.tab button.active {

background-color: #ccc;

}

/* Style the tab content */

.tabcontent {

float: left;

padding: 0px 12px;

border: 1px solid #ccc;

width: 70%;

border-left: none;

height: 300px;

}

و در مرحله آخر کد جاوااسکریپت

function openMyTab(evt, myTabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(myTabName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

function openMyTab(evt, myTabName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(myTabName).style.display = "block";

evt.currentTarget.className += " active";

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

نمونه این نوع تب را نیز میتوانید در فایل tabs-vertical.html ارائه شده در انتهای همین آموزش بیابید.

دانلود فایل های آماده این آموزش

دسترسی آسان به این مطلب لینک کوتاه :