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

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

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

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

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

ساخت tab headerهای قابل تغییر در وبسایت

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

<div id=&quotLondon&quot class=&quottabcontent&quot>
<h1>London</h1>
<p>London is the capital city of England.</p>
</div>
<div id=&quotParis&quot class=&quottabcontent&quot>
<h1>Paris</h1>
<p>Paris is the capital of France.</p>
</div>
<div id=&quotTokyo&quot class=&quottabcontent&quot>
<h1>Tokyo</h1>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id=&quotOslo&quot class=&quottabcontent&quot>
<h1>Oslo</h1>
<p>Oslo is the capital of Norway.</p>
</div>
<button class=&quottablink&quot =&quotopenCity('London', this, 'red')&quot id=&quotdefaultOpen&quot>London</button>
<button class=&quottablink&quot =&quotopenCity('Paris', this, 'green')&quot>Paris</button>
<button class=&quottablink&quot =&quotopenCity('Tokyo', this, 'blue')&quot>Tokyo</button>
<button class=&quottablink&quot =&quotopenCity('Oslo', this, 'orange')&quot>Oslo</button>

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

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

/* Style the tab buttons */

.tablink {

background-color: #555;

color: white;

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

font-size: 17px;

width: 25%;

}

/* Change background color of buttons on hover */

.tablink:hover {

background-color: #777;

}

/* Set default styles for tab content */

.tabcontent {

color: white;

display: none;

padding: 50px;

text-align: center;

}

/* Style each tab content individually */

#London {background-color:red;}

#Paris {background-color:green;}

#Tokyo {background-color:blue;}

#Oslo {background-color:orange;}

قدم سوم : در پایان نیز کد جاوا اسکریپت را اضافه کنید.

مثال ساخت سربرگ برای تب :

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