علامة التبويب Bootstrap JS
علامة تبويب JS (tab.js)
تُستخدم علامات التبويب لفصل المحتوى إلى أجزاء مختلفة حيث يمكن عرض كل جزء واحدًا تلو الآخر.
للحصول على برنامج تعليمي حول علامات التبويب ، اقرأ البرنامج التعليمي لبرنامج Bootstrap Tabs / Pills .
فئات البرنامج المساعد Tab
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked | |
| .tab-content | Together with .tab-pane and data-toggle="tab", it makes the tab toggleable | |
| .tab-pane | Together with .tab-content and data-toggle="tab", it makes the tab toggleable |
عبر 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>
عبر JavaScript
التمكين يدويًا باستخدام:
مثال
// 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 |
طرق الجدولة
يسرد الجدول التالي جميع طرق علامات التبويب المتاحة.
| Method | Description | Try it |
|---|---|---|
| .tab("show") | Shows the tab |
أحداث علامة التبويب
يسرد الجدول التالي جميع أحداث علامة التبويب المتاحة.
| Event | Description | Try it |
|---|---|---|
| show.bs.tab | Occurs when the tab is about to be shown. | |
| shown.bs.tab | Occurs when the tab is fully shown (after CSS transitions have completed) | |
| hide.bs.tab | Occurs when the tab is about to be hidden | |
| hidden.bs.tab | Occurs when the tab is fully hidden (after CSS transitions have completed) |
نصيحة: استخدم event.target و event.related الخاص بـ jQuery للحصول على علامة التبويب النشطة وعلامة التبويب النشطة السابقة:
مثال
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});