با استفاده از CSS و بدون جاوااسکریپت یک سیستم تب (Tabs) ساده طراحی کنید که با کلیک روی عنوان تبها محتوای مربوطه نمایش یابد و تب فعال از نظر رنگ و استایل متمایز باشد.
3.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:49 0.0
برای حل این تمرین از HTML ساده مثل input type="radio" یا لینک با :target و انتخابگرهای CSS مانند :checked یا :target ~ .content استفاده کنید تا نمایش/مخفی شدن بخشهای محتوا تنها با CSS انجام شود؛ عنوان تبها را با لیبلها مرتبط کنید، ورودیها را پنهان کرده و از انتخابگرهای خواهر برای نمایش محتوای متناظر بهره ببرید. توصیهها: از transition برای تغییر نرم بین تبها، از display/block یا max-height و overflow برای افکت آکاردئونی اگر خواستید، و از کلاس/استایل متمایز برای تب فعال (مثلاً رنگ پسزمینه متفاوت و border-bottom) استفاده کنید؛ همچنین برای دسترسی بهتر aria-selected و role="tab"/"tabpanel" را در نظر بگیرید.
توسط پژوهشگر در 220 روز قبل ساعت 01:49 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
استفاده از input type='radio' همراه با برچسبهای مرتبط و CSS-only با :checked یا :target، راهکاری ساده و بدون جاوااسکریپت برای پیادهسازی تبها است. ساختار HTML را طوری بچینید که هر تب یک رادیو و محتوای متنی متناظرش را داشته باشد و با استفاده از :checked و ترکیب انتخابگرهای همجوار، محتوای فعال را نمایش داده و بقیه را مخفی کنید. برای تجربه کاربری روان از transition روی opacity یا max-height استفاده کنید و برای تب فعال استایلی متمایز مانند رنگ پسزمینه یا border-bottom تعریف کنید. همچنین برای دسترسی، container را role='tablist' بدهید و هر تب را role='tab' و محتوای مربوطه را role='tabpanel' بنویسید؛ اگر بهروزرسانی aria-selected بهصورت پویا لازم باشد، معمولاً این کار با JavaScript سادهتر است.
گزارش