كيفية تنظيم علامات التبويب المتداخلة داخل علامة التبويب الرئيسية

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

ومع ذلك ، غالبا ما يكون من الضروري إنشاء علامات تبويب متداخلة إضافية داخل علامة التبويب الرئيسية. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، لهيكلة المعلومات المختلفة داخل أقسام علامة التبويب الرئيسية.

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

1. علامات التبويب الرئيسية: كيفية إنشاء علامات تبويب متداخلة
2. تعريف مفهوم علامات التبويب الأساسية
3. باستخدام علامات التبويب المتداخلة
4. خطوات إنشاء علامات تبويب متداخلة
5. أمثلة على استخدام علامات التبويب المتداخلة
6. سؤال وجواب

علامات التبويب الرئيسية: كيفية إنشاء علامات تبويب متداخلة

تعد علامات التبويب الأساسية طريقة ملائمة لتنظيم المعلومات على صفحة الويب. باستخدام علامات التبويب ، يمكنك تقسيم المحتوى إلى عدة كتل ذات صلة منطقية ، والسماح للمستخدم بالتبديل بينها بالنقر فوق علامات التبويب.

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

لإنشاء علامات تبويب متداخلة ، يمكننا استخدام مجموعة من العلامات

,

الفئة 3

المنتج 2

المنتج 3

في هذا المثال ، يتم استخدام منطقتين التبويب. الأول هو علامات التبويب الرئيسية (

) ، والتي تحتوي على علامات تبويب بأسماء فئات المنتجات. والثاني هو علامات التبويب المتداخلة ، والتي يتم عرضها كجدول (

) ، وتحتوي على علامات تبويب بأسماء المنتجات.

لإضافة وظيفة علامات التبويب المتداخلة ، تحتاج إلى استخدام جافا سكريبت. يمكننا إضافة معالجات الأحداث التي ستغير علامات التبويب النشطة عندما ينقر المستخدم.

باستخدام كس ، يمكننا إضافة أنماط لعلامات التبويب النشطة ، وكذلك إخفاء محتويات علامات التبويب غير النشطة.

وبالتالي ، فإن إنشاء علامات تبويب متداخلة داخل علامات التبويب الرئيسية يسمح لنا بتنظيم المعلومات وجعلها أكثر تنظيما ويمكن للمستخدمين الوصول إليها.

تعريف مفهوم علامات التبويب الأساسية

• علامات التبويب الأساسية هي عناصر واجهة المستخدم المصممة للتنظيم والتنقل عبر أقسام أو أقسام فرعية مختلفة من المعلومات أو الوظائف داخل تطبيق ويب أو على صفحة ويب. إنها مجموعة من علامات التبويب التي يتم وضعها عادة أعلى المحتوى وتسمح لك بالتبديل بسرعة بين الأقسام المختلفة.
1. قد تحتوي علامات التبويب الرئيسية على تسمية نصية لكل علامة تبويب ، بالإضافة إلى رمز أو رمز لتوفير تعريف مرئي أكثر للمحتوى المعروض في كل علامة تبويب. عندما يختار المستخدم إحدى علامات التبويب ، يتم عرض المحتوى المقابل داخل علامة التبويب الرئيسية ، دون الحاجة إلى تحميل صفحة جديدة أو تحديث الصفحة الحالية.
2. غالبا ما تكون علامات التبويب الرئيسية مصحوبة بأقسام يمكن وضعها أسفل علامات التبويب أو بجانبها. قد تحتوي هذه الأقسام على معلومات أو إعدادات أو إجراءات إضافية متعلقة بعلامة التبويب المحددة. على سبيل المثال ، في علامة التبويب الرئيسية "إعدادات الحساب" قد يكون هناك قسم "تغيير كلمة المرور" ، "إدارة الإشعارات" ، إلخ.
3. تعد علامات التبويب الأساسية مفيدة جدا في هيكلة وتنظيم كميات كبيرة من المعلومات أو الوظائف ، خاصة عندما يمكن تنظيم هذه المعلومات في أقسام أو فئات منطقية.
4. مزايا استخدام علامات التبويب الأساسية:

سهولة التنقل عبر مجموعة متنوعة من الأقسام أو الفئات;

توفير مساحة على الصفحة أو في التطبيق;

راحة التبديل بين أنواع مختلفة من المعلومات;

القدرة على عرض معلومات أكثر تفصيلا داخل علامة التبويب المحددة.

علامات التبويب الأساسية هي عنصر واسع الانتشار في تصميم واجهة المستخدم وتستخدم في العديد من تطبيقات الويب والمواقع لأغراض مختلفة. إنها تضمن وضوح وسهولة استخدام التطبيق أو موقع الويب ، مما يزيد من رضا المستخدمين وكفاءتهم بشكل عام.

باستخدام علامات التبويب المتداخلة

تعد علامات التبويب المتداخلة طريقة فعالة لتنظيم المعلومات ، خاصة عندما يكون هناك الكثير من المحتوى على الصفحة التي يجب تقسيمها إلى فئات أو أقسام مختلفة. إنها تسمح للمستخدم بالوصول إلى أقسام أو علامات تبويب مختلفة تحتوي على معلومات دون الحاجة إلى التمرير عبر الصفحة أو الانتقال إلى صفحات أخرى.

علامة التبويب 1

علامة التبويب 2

علامة التبويب 3

محتويات علامة التبويب 1

محتويات علامة التبويب 3

باستخدام كس ، يمكنك إضافة أنماط ورسوم متحركة لتغيير علامات التبويب النشطة ومحتوياتها بصريا.

وبالتالي ، فإن استخدام علامات التبويب المتداخلة هو نهج فعال وعملي لتنظيم المعلومات على صفحة الويب. إنها تجعل الواجهة أكثر سهولة في الاستخدام ويمكن للمستخدمين الوصول إليها ، وتجعل من السهل التبديل بين الأقسام المختلفة والحصول على المعلومات التي تحتاجها.

خطوات إنشاء علامات تبويب متداخلة

الخطوة 1: إنشاء بنية هتمل الأساسية لعلامات التبويب. يمكن أن يكون مستطيلا بسيطا يحتوي على قائمة برؤوس علامات التبويب.

عنوان علامة التبويب 1

عنوان علامة التبويب 2

عنوان علامة التبويب 3

محتويات الجدول 1

محتويات الجدول 2

محتويات الجدول 3

الخطوة 2: تحديد أنماط علامات التبويب ومحتوياتها. Ss المغلق -,،..

.علامات التبويب {

الحدود: 1 بكسل الصلبة # سك;

الحشو: 10 بكسل;

}

.قائمة التبويب {

نوع نمط القائمة: لا شيء;

الهامش: 0;

الحشو: 0;

عرض: فليكس;

}

.علامة التبويب قائمة لى {

الهامش الأيمن: 10 بكسل;

المؤشر: المؤشر;

}

.نشط {

اللون: أزرق;

}

.علامة التبويب - المحتوى {

الهامش الأعلى: 10 بكسل;

}

.لوحة التبويب {

عرض: لا شيء;

}

.لوحة التبويب.نشط {

عرض: كتلة;

1. }

   • Шаг 3: Напишите скрипт для обработки событий щелчка по заголовкам табов и переключения между ними.
   • document.addEventListener('DOMContentLoaded', function() {
   • var tabs = document.querySelectorAll('.tabs');

2. for (var i = 0; i < tabs.length; i++) {

   • var tab = tabs[i];
   • var tabPanels = tab.querySelectorAll('.tab-panel');
   • var tabLinks = tab.querySelectorAll('.tab-list li');

3. for (var j = 0; j < tabLinks.length; j++) {

   • (function(index) {
   • tabLinks[j].addEventListener('click', function() {
   • for (var k = 0; k < tabPanels.length; k++) {

تاببانيلز [ك].قائمة الفصل.إزالة ('نشط');

تابلينك [ك].قائمة الفصل.إزالة ('نشط');