ساخت تب در وبسایت

در این مقاله از آموزش طراحی سایت می آموزید که چطور با استفاده از CSS و جاوا اسکریپت زبانه (Tab) ایجاد کنید. زبانه ها (Tab ها) برای برنامه ها کاربردی تک صفحه ای یا صفحات وبی که موضوعات مختلف را نمایش می دهند، مناسب هستند.

ایجاد Tab های قابل تغییر

قدم اول : کد HTML را اضافه کنید.
مثال :

                 London
                 Paris
                 Tokyo




                 
London
                 
London is the capital city of England.



                 
Paris
                 
Paris is the capital of France.



                 
Tokyo
                 
Tokyo is the capital of Japan.

از دکمه ها برای باز کردن محتوای خاصی از یک Tab استفاده کنید . تمام مولفه های با استفاده از class="tabcontent" بصورت پیشفرض پنهان میشوند ( با کد های CSS و JS ). زمانیکه کاربر روی یک دکمه کلیک میکند محتوای tab ای باز می شود که مربوط به این دکمه می باشد.

قدم دوم :   کد CSS را اضافه و دکمه ها و محتویات tab را نگارش کنید ( فرم دهید).
مثال :

/* 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 openCity(evt, cityName) {

  // 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(cityName).style.display = "block";

  evt.currentTarget.className += " active";

}

محو شدن Tab ها

اگر میخواهید محتویات tab را محو کنید ، کد CSS زیر را اضافه کنید .

.tabcontent {

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

}



/* Go from zero to full opacity */

@keyframes fadeEffect {

  from {opacity: 0;}

  to {opacity: 1;}

}

نمایش Tab بصورت پیش فرض

برای باز کردن یک Tab بخصوص در هنگام بارگذاری ( لود ) صفحه، از کد جاوا اسکریپت برای کلیک بر روی دکمه بخصوص استفاده کنید.

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



<script>

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

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

</script>

بستن Tab

اگر می خواهید tab بخصوصی را ببندید، می توانید از جاوا اسکریپت استفاده کنید و بوسیله یک دکمه، Tabرا ببندید.

<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>

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