كيفية إنشاء علامات تبويب مع مؤشر انزلاقي باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء علامات تبويب Pure CSS بمؤشر باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء علامات تبويب Pure CSS بمؤشر باستخدام HTML و CSS فقط.

 

الواجهة المبوبة أو ببساطة علامة التبويب هي عنصر تحكم رسومي يمكن للمرء استخدامه لاحتواء لوحات أو مستندات متعددة في نافذة واحدة ليتمكن المستخدمون من الوصول إليها. تعد علامات تبويب CSS أسهل طريقة لجذب المزيد إلى المستخدمين.

 

في هذا البرنامج [Pure CSS Tabs with Slide Indicator] ، ​​على صفحة الويب ، يوجد مربع محتوى به علامات تبويب ولكل علامة تبويب محتوى خاص بها. تحتوي علامات التبويب هذه على أحداث أو إجراءات للنقر ، مما يعني أنه عند النقر فوق علامة التبويب المحددة ، يتم عرض محتوى علامة التبويب الحالية أو النشطة. إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [علامات التبويب باستخدام HTML و CSS فقط].

 

في الفيديو ، شاهدت علامات تبويب Pure CSS مع مؤشر Slide. أتمنى أن تكون قد فهمت الرموز الأساسية وراء إنشاء علامة التبويب هذه. يتم إنشاء الرسوم المتحركة للنقر بعلامات التبويب هذه باستخدام HTML & CSS فقط وقد استخدمت علامات HTML <input type = ”radio”> و <label> مع التسمية ، لقد قمت بالتحكم في أزرار الاختيار.

 

 

تستند إجراءات النقر على البرنامج هذه تمامًا أو ممكنة باستخدام علامة راديو من نوع الإدخال. إذا كنت مبتدئًا وتعرف HTML و CSS الأساسيين ، فيمكنك أيضًا إنشاء هذا النوع من علامات تبويب CSS الخالصة واستخدامها في صفحات HTML ومواقع الويب والمشاريع.

 

علامات تبويب CSS نقية مع مؤشر انزلاق

لإنشاء هذا البرنامج [Tabs باستخدام HTML & CSS فقط]. أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. تحميل الملف من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow