علامة التبويب مؤسسة
التبويب الملاحة يمكن أن تكون جيدة جدا لاظهار محتوى مختلف، ومحتوى يمكن أن تنتقل.
علامة التبويب استخدام <ul class="tabs" data-tab> -tab> لإنشاء كل خيار <li> وعنصر وإضافة .tab-title فئة لإنشاء.
نصيحة: يمكنك استخدام العنصر المحدد حاليا .active الطبقة.
أمثلة
<الدرجة لي = "التبويب عنوان النشط"> <a أ href = "#"> الرئيسية </ أ> </ لى>
<الدرجة لي = "التبويب عنوان "> <a أ href = "#"> القائمة 1 </ أ> </ لى>
<الدرجة لي = "التبويب عنوان "> <a أ href = "#"> القائمة 2 </ أ> </ لى>
<الدرجة لي = "التبويب عنوان "> <a أ href = "#"> القائمة 3 </ أ> </ لى>
</ UL>
محاولة »
علامة التبويب العمودي
علامة التبويب العمودي استخدم .vertical فئات:
التبويب التبديل
إذا كنت ترغب في تغيير علامة التبويب الإعداد، يمكنك استخدام العنصر <div> بالإضافة إلى .content الطبقة. بالإضافة إلى معرف فريد على كل علامة تبويب، وتوصيله إلى عنصر القائمة (<لأ href = "# menu1" يفتح معرف = "menu1" محتوى الخيار). وأخيرا، كل الخيارات على محتوى <div> على عنصر، <div> عنصر لإضافة .tabs-content الطبقي، وتهيئة مؤسسة شبيبة.
ملاحظة .active يضاف الطبقة تلقائيا إلى علامة التبويب المحددة حاليا:
أمثلة
<الدرجة لي = "التبويب عنوان النشط"> <a أ href = "#home"> الرئيسية </ أ> </ لى>
<الطبقة = "التبويب لقب لي "> <a أ href = "# menu1"> القائمة 1 </ أ> </ لى>
<الطبقة = "التبويب لقب لي "> <a أ href = "# menu2"> القائمة 2 </ أ> </ لى>
<الطبقة = "التبويب لقب لي "> <a أ href = "# menu3"> القائمة 3 </ أ> </ لى>
</ UL>
<div الطبقة = "علامات التبويب المحتوى ">
<فئة الدرجة = "المحتوى النشط" معرف = "الوطن">
<H3> منزل </ H3>
<P> المنزل هو حيث القلب هو .. </ P>
</ div>
<div الطبقة = "المحتوى" معرف = "menu1">
<H3> القائمة 1 </ H3 >
<P> بعض النص، blabla ل< / P>
</ div>
<div الطبقة = "المحتوى" معرف = "menu2">
<H3> القائمة 2 </ H3 >
<P> بعض النصوص الأخرى. < / P>
</ div>
<div الطبقة = "المحتوى" معرف = "menu3">
<H3> القائمة 3 </ H3 >
<P> علامة التبويب آخر. </ P>
</ div>
</ div>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
علامة التبويب تتلاشى
استخدام CSS لتخصيص علامات التبويب تتلاشى في الأثر:
أمثلة
-webkit الرسوم المتحركة: fadeEffect 1S.
الرسوم المتحركة: 1S fadeEffect.
}
@ -webkit-إطارات مفتاحية fadeEffect {
من {غموض: 0؛}
إلى {غموض: 1؛}
}
keyframes fadeEffect {
من {غموض: 0؛}
إلى {غموض: 1؛}
}
محاولة »