تحكم علامات التبويب في Bootstrap شائعة جدًا بين المطورين من أجل بساطة وسهولة الاستخدام. ومع ذلك ، فإن أسلوبه عازب نسبيًا ، كيف يمكن أن يحقق تأثيرًا أكثر جمالًا بناءً على شكله الأصلي؟ لقد كنت أفكر في هذه القضية. بالإضافة إلى ذلك ، يجب أن تنقر علامات التبويب في Bootstrap على كل علامة تبويب لتحقيق التبديل. هل يمكنك استخدام jQuery للتحكم في التبديل التلقائي والسماح لها بالتبديل من علامة تبويب إلى أخرى بعد فترة زمنية (مثل 5 ثوان)؟ فيما يلي عملية التنفيذ الخاصة بي ، أولاً وقبل كل شيء ، رمز HTML الخاص بجزء علامات التبويب:
<div rom = "tabpanel"> <!-علامات تبويب NAV-> <ul rom = "tableist" style = "margin-top: 0px ؛" id = "doctabs"> <li rob = "عرض تقديمي"> <a href = "#section_new" aria-controls = "home" rob = "tab" data-toggle = "tab"> أحدث </a> <li rob = "table> table> table> table> table> table> rob = "العرض التقديمي"> <a href = "#section_month" aria-controls = "messages" roly = "tab" data-toggle = "tab"> شعبية في 30 يومًا </a> </ul> <!-أجهزة التبويب-> <div> <div rob = "tabpanel" id = "section_new"> <p>
المحتويات في TAB1
</p> </viv> <div rom = "tabpanel" id = "section_week"> <p>
المحتويات في TAB2
</p> </viv> <div rob = "tabpanel" id = "section_month"> <p>
المحتوى في TAB3
</p> </viv> </viv> </viv>
هذه الرموز هي في الأساس نفس الكود الأصلي في bootstrap. لا تحتاج إلى إجراء الكثير من التغييرات ، فقط املأ بياناتك الخاصة.
دعنا نتعدد أنماط علامات التبويب. هذه الأنماط ستعمل على الكتابة فوق الأنماط الأصلية في bootstrap لتحقيق تأثير تجميل علامات التبويب.
<type type = "text/css">. tab .nav-tabs {border-bottom: 0 none ؛ background: #eaea ؛}. tab .nav-tabs li a {border: transparent ؛ border-radius: 0 ؛ font-size: 16px ؛ border: none ؛ color: #333 ؛ poad: 12px 2px ؛}. li.active ai {border: 0 none ؛ background: #e67e2 ؛ color: #fff ؛}. tab .Nav-tabs .Nav-tabs li.active a: efr {content: "{position: aboor ؛ left: 45 ٪ ؛ bottom: -14px ؛ porder: 7px solid radparent ؛ border-top: 7px table #e67e2 ؛ 5px ؛ اللون: #5a5c5d ؛ الحجم الخط: 14px ؛ خط الذروة: 20px ؛ الهامش: 5px ؛ brown-bottom: 1px solid #e67e22 ؛}@media screen فقط و (max-width: 480px) .nav-tabs li.active a {border-radius: 10px 10px 0 0 ؛ لا شيء ؛}} </style>بعد أن يخرج التأثير ، يبدو هذا:
هل هو أفضل من النمط الأصلي لـ Bootstrap (لكن كل شخص لديه تفضيلاته الخاصة. فيما يلي مجرد مقدمة لعملية التنفيذ. بالطبع ، يمكنك أيضًا عمل أنماط أخرى عن طريق تعديل CSS)
دعنا نلقي نظرة على كيفية تنفيذ التبديل التلقائي لعلامات التبويب. دون مزيد من اللغط ، فقط أدخل الرمز:
. الحوام في منطقة القائمة. mouseover (function () {clearinterval (الفاصل الزمني) ؛}) ؛ // متابعة الدوران $ (". tab-pane"). mouseout (function () {timer (i) ؛}) ؛}) ؛ما سبق هو تجميل وتحسين التحكم في علامات التبويب في bootstrap المقدمة لك من قبل المحرر (الموصى به). آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!