أحدث البرامج التعليمية وتطوير الشبكة
 

Bootstrap شبيبة تبويب

❮ السابق التالي المرجعي ❯

JS Tab (tab.js)

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

لتعليمي حول علامات التبويب، اقرأ Bootstrap Tabs/Pills التعليمي .

فئات تبويب البرنامج المساعد

صف مدرسي وصف مثال
.nav nav-tabs يخلق علامات التبويب الملاحة جربها
.nav-justified يجعل التنقل tabs/pills الاعراض متساوية من الأم، في شاشات أوسع من 768px. على الشاشات الأصغر حجما، مكدسة علامات التبويب الملاحة جربها
.tab-content جنبا إلى جنب مع .tab-pane و data-toggle="tab" ، فإنه يجعل toggable التبويب جربها
.tab-pane جنبا إلى جنب مع .tab-content و data-toggle="tab" ، فإنه يجعل toggable التبويب جربها

عبر data-* سمات

إضافة data-toggle="tab" إلى كل علامة تبويب، وإضافة .tab-pane الدرجة مع معرف فريد لكل التبويب والتفاف عليها في .tab-content الطبقة.

مثال

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>
انها محاولة لنفسك »

عن طريق جافا سكريبت

تمكين يدويا مع:

مثال

// Select all tabs
$('.nav-tabs a').click(function(){
    $(this).tab('show');
})

// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab
$('.nav-tabs a:first').tab('show')

// Select last tab
$('.nav-tabs a:last').tab('show')

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
انها محاولة لنفسك »

خيارات علامة التبويب

None

طرق التبويب

يسرد الجدول التالي أساليب التبويب كل ما هو متاح.

طريقة وصف جربها
.tab("show") يظهر علامة التبويب جربها

تبويب الأحداث

يسرد الجدول التالي الأحداث التبويب كل ما هو متاح.

حدث وصف جربها
show.bs.tab يحدث عندما علامة التبويب هو على وشك أن تظهر. جربها
shown.bs.tab يحدث عندما يتم عرض علامة التبويب بالكامل (بعد الانتهاء التحولات CSS) جربها
hide.bs.tab يحدث عندما تكون علامة التبويب على وشك أن تكون مخفية جربها
hidden.bs.tab يحدث عندما يتم إخفاء علامة التبويب بالكامل (بعد الانتهاء التحولات CSS) جربها

نصيحة: استخدم مسج ل event.target و event.relatedTarget للحصول على علامة التبويب النشطة وعلامة التبويب النشطة السابق:

مثال

$('.nav-tabs a').on('shown.bs.tab', function(event){
    var x = $(event.target).text();         // active tab
    var y = $(event.relatedTarget).text();  // previous tab
});
انها محاولة لنفسك »

❮ السابق التالي المرجعي ❯