آموزش ساخت تب با استفاده از جاوااسکریپت و CSS

دوشنبه ۸ شهریور ۱۳۹۵

آموزش ساخت تب با استفاده از جاوااسکریپت و CSSReviewed by جواد نبوی on Aug 29Rating: 4.0

آموزش ساخت تب (Tab)

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

آموزش ساخت تب با جاوااسکریپت و CSS

مرحله اول: اضافه کردن کد HTML

ابتدا کد html زیر را در جایی که میخواهید تب به نمایش در آید قرار دهید:

<ul class="tab">
 <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
 <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
 <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
 </ul>

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

در کد بالا ما یک لیست با سه لینک درونش ساختیم. این لینک ها همان تب های ما هستند که وقتی رویشان کلیک کنیم، تب مربوطه باز می شود. البته بعدا با جاوااسکریپت مشخص می کنیم که کدام لینک مربوط به کدام تب است. همچنین دیو هایی که با class=”tabcontent” مشخص شده اند، همان محتویات تب ها هستند. این دیو ها را در CSS به صورت پیشفرض مخفی میکنیم. سپس با جاوااسکریپت کاری میکنیم که با کلیک روی هر کدام، از حالت مخفی خارج شوند.

برای اضافه کردم محتویات خود، درون تگ <h3> میتوانید یک عنوان بگذارید و در تگ <p> هم توضیحات آن تب را بنویسید. به علاوه در تگ <a> که درون لیست ها قرار داده ایم هم باید نام آن تب را بنویسید تا درون دکمه تب ها به نمایش در آید.

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

کد CSS زیر را به فایل استایل خود اضافه کنید:

/* استایل دادن به لیست */
 ul.tab {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
 }

/* قرار دادن دکمه های موجود در لیست کنار هم */
 ul.tab li {float: left;}

/* استایل دهی به لینک های موجود در لیست */
 ul.tab li a {
 display: inline-block;
 color: black;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 transition: 0.3s;
 font-size: 17px;
 }

/* تغییر رنگ پس زمینه لینک ها در صورت قرار گرفتن موس روی آنها */
 ul.tab li a:hover {background-color: #ddd;}

/* استایل دهی به دکمه تب فعال و فعلی */
 ul.tab li a:focus, .active {background-color: #ccc;}

/* استایل دهی به محتویات تب */
 .tabcontent {
 display: none;
 padding: 6px 12px;
 border: 1px solid #ccc;
 border-top: none;
 }

همانطور که میبینید، در کد بالا ابتدا به دکمه ها (لینک ها) ی تب استایل دادیم. سپس برای کلاس tabcontent ویژگی display: none را مشخص کردیم تا محتویات تب به صورت پیشفرض مخفی باشد. توضیحات مربوط به هر بخش از کد CSS را در یک کامنت نوشته ایم.

مرحله سوم: اضافه کردن کد جاوااسکریپت

کد JavaScript زیر را به پروژه تان اضافه کنید. سعی کنید آن را قبل از تگ پایان <body/> قرار دهید.

<script>
 function openCity(evt, cityName) {
 // تعریف همه متغیر ها
 var i, tabcontent, tablinks;

// دریافت همه عناصر با کلاس tabcontent و مخفی کردن آنها
 tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
 tabcontent[i].style.display = "none";
 }

// دریافت همه عناصر با کلاس tablinks و پاک کردن کلاس active از آنها
 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
 tablinks[i].className = tablinks[i].className.replace(" active", "");
 }

// نمایش دادن تب فعلی و اضافه کردن یک کلاس "active" به لینکی که تب فعلی را باز کرده است
 document.getElementById(cityName).style.display = "block";
 evt.currentTarget.className += " active";
 }
 </script>

فکر می کنم توضیحات موجود در کامنت کد بالا کاملا گویا باشد. نتیجه را در صفحه زیر ببینید:

ظاهر شدن تب ها به صورت Fade-in

اگر میخواهید هنگام کلیک روی یک تب، محتویات آن به صورت Fade-in یا آهسته ظاهر شود، کافیست کد CSS زیر را به استایل خود اضافه کنید:

.tabcontent {
 -webkit-animation: fadeEffect 1s;
 animation: fadeEffect 1s; /* افکت Fading یک ثانیه زمان میبرد*/
 }

@-webkit-keyframes fadeEffect {
 from {opacity: 0;}
 to {opacity: 1;}
 }

@keyframes fadeEffect {
 from {opacity: 0;}
 to {opacity: 1;}
 }

نتیجه را در صفحه زیر ببینید:

امیدواریم که از آموزش امروز هم لذت برده باشید. برای دانلود پروژه ما میتوانید از لینک زیر استفاده کنید:

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *