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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)