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

آموزش طراحی سایت - ساخت تب های عمودی در طراحی وب سایت

آموزش طراحی سایت

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

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

Tab های عمودی

Tab ها برای برنامه های کاربردی تک صفحه ای یا صفحات وبی که موضوعات مختلف را نمایش می دهند، مناسب هستند. Tab های عمودی قابل تغییر ایجاد کنید.

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

<div class="tab">

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

<button class="tablinks" ="openCity(event, 'Paris')">Paris</button>

<button class="tablinks" ="openCity(event, 'Tokyo')">Tokyo</button>

</div>

<div id="London" class="tabcontent">

<h3>London</h3>

<p>London is the capital city of England.</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>

از دکمه ها برای باز کردن محتوای خاصی از یک 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;

}

قدم سوم : آخرین قدم برای ساخت تب عمودی، اضافه کردن کدهای جاوا اسکریپت است.

مثال ساخت تب عمودی :