يقدم هذا المثال تطبيق تطبيق علامة التبويب. هذا المكون الإضافي بسيط نسبيًا. المحتوى المحدد كما يلي
ملف رمز المصدر:
tab.js
مبدأ التنفيذ:
1. عند النقر فوق عنصر ، قم أولاً بإلغاء العنصر المميز أصلاً.
2. ثم قم بتمييز العنصر الذي تم النقر عليه
3. إذا كان النقر فوق عنصر ما هو خيار في المربع المنسدل ، فحدد نفسه وحدد أيضًا مربع المنسدل.
5. إذا تم تعريف الرسوم المتحركة ، فقم بتنفيذ الرسوم المتحركة أولاً ثم رد الاتصال
تحليل رمز المصدر:
1. يتم تشغيل طريقة العرض عند النقر فوق عنصر ، مما سيؤدي إلى تشغيل الأحداث الأربعة التالية.
1.1. hiden.bs.tab: إخفاء العنصر السابق
1.2. show.bs.tab: أظهر العنصر الحالي
1.3. Hideen.bs.tab: أكمل عن طريق إخفاء العنصر السابق
1.4. dhown.bs.tab: أظهر العنصر الحالي الكامل
1.5. رمز مصدر الحدث Hiden/Show:
var $ previour = $ ul.find ('. active: last a') var hideevent = $ .event ('Hide.bs.tab' ، {knowEdTarget: $ this [0]}) var showevent = $.2. نشط: تنشيط الكائن الحالي
2.1. أضف سمة تم توسيعها إلى عنصر التنقل لتمييز ما إذا كان هذا العنصر في الحالة الموسعة
2.2. باستخدام آلية التراجع ، استخدم سمة عرض الإزاحة لتحقيق إعادة الطلاء الجزئي
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
تم تجميع هذه السلسلة من البرامج التعليمية في: Bootstrap Basic Prosorials Topic ، مرحبًا بك في النقر للتعلم.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.