مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS
نفّذ واجهة علامات تبويب باستخدام تقنية CSS :checked، وقارنها بنهج JavaScript.
مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
متطلبات مكوّن علامات التبويب
يحتاج مكوّن علامات التبويب إلى مؤشر مرئي لعلامة التبويب النشطة، ولوحة مرتبطة تُظهر أو تُخفي عند الاختيار، وتنقل باستخدام لوحة المفاتيح بين علامات التبويب، وسمات ARIA سهلة الوصول. ويمكن تحقيق ذلك باستخدام CSS فقط من خلال حيلة :checked أو باستخدام JavaScript لتوفير إمكانية وصول أفضل.
حيلة :checked
تعمل مدخلات radio المخفية كحالة: تكون كل علامة تبويب عنصر <label> مرتبطًا بمدخل radio. عند تحديد radio، تعرض محددات الأشقاء في CSS اللوحة المطابقة وتنسّق تسمية علامة التبويب النشطة. لا حاجة إلى JavaScript.
<div class="tabs">
<input type="radio" name="tabs" id="tab-1" checked hidden />
<label for="tab-1">Tab One</label>
<div id="panel-1">Panel one content</div>
</div>
بنية CSS باستخدام :checked
ضع مدخلات radio، ثم جميع التسميات، أي علامات التبويب، ثم جميع اللوحات في الحاوية نفسها. استخدم مُركّب الأشقاء العام (~) لربط radio المحدد باللوحة المطابقة له. تكون اللوحات مخفية افتراضيًا باستخدام display: none، بينما تحصل اللوحة المطابقة على display: block.
قيود أسلوب :checked
لا تستطيع حيلة :checked تحديث سمات ARIA مثل aria-selected وaria-controls، ولا تمكين التنقل بين علامات التبويب باستخدام مفاتيح الأسهم. وقد تتعارض قيود ترتيب DOM، التي تفرض وجود المدخلات قبل اللوحات، مع متطلبات التصميم المرئي. تحد هذه الفجوات من إمكانية الوصول الحقيقية.
مكوّن علامات التبويب باستخدام JavaScript
يستمع مكوّن علامات التبويب المبني باستخدام JS إلى أحداث النقر على أزرار علامات التبويب، ويضبط aria-selected على علامة التبويب النشطة، ويحدّث aria-hidden على اللوحات، ويدير التركيز. يتيح هذا الأسلوب الامتثال الكامل لـ ARIA وأنماط التفاعل باستخدام لوحة المفاتيح وفقًا لـ ARIA Authoring Practices.
أدوار ARIA لعلامات التبويب
استخدم role="tablist" على الحاوية، وrole="tab" على كل زر علامة تبويب مع aria-selected وaria-controls، وrole="tabpanel" على كل لوحة مع aria-labelledby. يعلن قارئو الشاشة عدد علامات التبويب وموضعها وحالتها المحددة.
نمط التفاعل باستخدام لوحة المفاتيح
تحدد ARIA Authoring Practices لعلامات التبويب ما يلي: يدخل مفتاح Tab إلى قائمة علامات التبويب ويركز على علامة التبويب النشطة. ينقل السهم الأيسر أو الأيمن التركيز بين علامات التبويب. ينتقل Home أو End إلى أول علامة تبويب أو آخرها. يفعّل كل انتقال باستخدام مفاتيح الأسهم علامة التبويب التي انتقل إليها التركيز، وفق نمط التفعيل التلقائي.
CSS للحالة النشطة
نسّق علامة التبويب النشطة باستخدام حد سفلي أو تغيير في الخلفية عبر محدد [aria-selected="true"]، إذ يعمل مع كل من أسلوبي JS و:checked. يحافظ ذلك على تزامن CSS مع سمة حالة ARIA، متجنبًا إدارة حالتين منفصلتين.
<div role="tablist">
<button role="tab" aria-selected="true">Overview</button>
<button role="tab" aria-selected="false">Details</button>
</div>
المؤشر المتحرك
ينزلق مؤشر تبويب متحرك بين التبويبات: ضع عنصر مؤشر بموضع مطلق، واستخدم JavaScript لضبط موضعه left وعرضه ليتطابقا مع أبعاد التبويب النشط، ثم حرّكه باستخدام transition: left 200ms ease, width 200ms ease.
تجاوز التبويبات في التصميم المتجاوب
عندما تتجاوز التبويبات حاويتها على الشاشات الصغيرة، استخدم التمرير الأفقي (overflow-x: auto; scrollbar-width: none) أو حوّلها إلى قائمة منسدلة من نوع select على الأجهزة المحمولة. يتطلب أسلوب select استخدام JS لمزامنة عنصر select الأصلي مع مستوى رؤية لوحة التبويب.
CSS فقط أم JS: متى يُستخدم كل منهما
استخدم حيلة :checked لواجهات المستخدم البسيطة وغير الحرجة، حيث لا تمثل إمكانية الوصول قيدًا ذا أولوية. استخدم تبويبات JavaScript لأي واجهة إنتاج تخدم مستخدمي لوحة المفاتيح أو قارئات الشاشة، أو للتطبيقات التي تتطلب الامتثال لـ ARIA أثناء عمليات التدقيق أو للمتطلبات القانونية.
اختبار المعرفة
ما القيد الأساسي على إمكانية الوصول الذي تفرضه حيلة CSS :checked عند استخدام التبويبات؟
الملخص
تتيح حيلة :checked التبديل بين التبويبات باستخدام CSS فقط، وذلك عبر مدخلات radio ومُركِّبات العناصر الشقيقة، لكنها تفتقر إلى ARIA وإمكانية الوصول عبر لوحة المفاتيح. أما تبويبات JavaScript المزودة بأدوار ARIA (tablist وtab وtabpanel)، وإدارة aria-selected، ومعالجة مفاتيح الأسهم، فتوفّر التجربة الكاملة التي يمكن الوصول إليها والمطلوبة لمكونات الإنتاج.
الأسئلة الشائعة
هل درس «مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS» مجاني؟
نعم — نص درس «مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS»؟
نفّذ واجهة علامات تبويب باستخدام تقنية CSS :checked، وقارنها بنهج JavaScript. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مكوّن بطاقة باستخدام خصائص CSS المخصصة
- تنسيق النوافذ المنبثقة ومربعات الحوار
- أنماط القوائم المنسدلة وPopovers
- مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS