آموزش ساخت تب با استفاده از جاوااسکریپت و 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 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

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

  1. مجله هذلولی گفت:

    سلام.
    این آموزش در w3school موجوده. میخاستم بپرسم چطوری میشه همین اسکریپ رو در فایل single.php اضافه کرد و در کجای کدها دقیقا باید اضافه بشه. دو هفتس وب رو زیر و رو کردم تا بتونم تب عمودی راه بندازم برای زمینه هایی که با acf pro ایجاد کردم. همه چی خوبه تا میرسه به اسکریپت، که با کلیک کردن روی هر دکمه، محتواش نمایش داده بشه. کار نمی کنه که نمی کنه. ممنون میشم راهنماییم کنین.
    خیر از جوونیت ببینی جوون.

    1. جواد نبوی گفت:

      سلام
      فقط کافیه کد تب رو به فایل single.php درون حلقه مطالب قرار بدید. بعد هر محتوایی که دلتون میخواد درون تب های مخصوص به خودش بگذارید. مثلا تگ the_content رو توی تب اول و کد های زمینه دلخواه افزونه acf رو در تب های دیگه قرار بدید.

  2. مجله هذلولی گفت:

    سلام مجدد خدمت سرور گرامی
    منظورم مکان قراردادن جی کوئری یا جاوااسکریپت هستش. باید در کجای single.php قرار بگیره؟ یا اینکه در فایل دیگه ای باید جا داد؟
    الان همه چی درسته فقط روی عنوان هر تب که کلیک می کنم هیچ اتفاقی نمی افته و محتوای مربوط به اون دکمه نشون داده نمی شه.
    ممنون از حسن توجه شما.

    1. جواد نبوی گفت:

      سلام عزیز
      کد های css و html که در خود فایل single.php قرار میگیرند.
      اما کد های جاوااسکریپت باید قبل از تگ قرار بگیرند. که این تگ معمولا در فایل footer.php قرار دارد. در غیر اینصورت باید بگردید و ببینید این تگ در کدام یک از فایل های قالب قرار گرفته. در صورتی که جاوااسکریپت به درستی فراخوانی نشه تب ها کار نمی کنند.
      با آرزوی موفقیت

پاسخ دهید

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