ساخت تب های عمودی در طراحی وب سایت

در این مقاله می آموزیم که چطور با استفاده از کد های CSS و جاوا اسکریپت، tabهای عمودی ایجاد کنید.

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="tbcontent" بصورت پیشفرض پنهان میشوند (با کد های CSS و JS). زمانیکه کاربر روی یک دکمه کلیک میکند محتوای tab ای باز می شود که مربوط به این دکمه می باشد.

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

* {box-sizing: border-box}

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

/* Style the buttons that are used to open the tab content */
.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;
}

/* 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 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 link that opened the tab

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

  evt.currentTarget.className += " active";

}

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