Вкладки были описаны ранее в статье Bootstrap - Элементы навигации. Объединив несколько атрибутов данных, вы можете легко создать интерфейс с вкладками. С помощью этого плагина вы можете переходить через панели локального контента на вкладках или таблетках, даже с помощью выпадающих меню.

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится tab.js, после включения bootstrap.js или bootstrap.min.js.

Применение Tab

Вы можете включить вкладки двумя способами:

  • Через атрибуты данных - вам необходимо добавить data-toggle = "tab" или data-toggle = "pill" к якорям ссылок. Добавление классов nav и nav-tabs на вкладке ul будет применять стиль закладки Bootstrap, в то время как добавление классов nav и nav-pills будет применяться к стилю таблетирования.
    <ul class = "nav nav-tabs">
       <li><a href = ".identifier" data-toggle = "tab">Home</a></li>
       ...
    </ul>
    
  • Через JavaScript - вы можете активировать вкладки с помощью Javscript, как показано ниже:
    $('#myTab a').click(function (e) {
       e.preventDefault()
       $(this).tab('show')
    })
    
  • Вот пример различных способов активации отдельных вкладок -
    // Select tab by name
    $('#myTab a[href = "#profile"]').tab('show')
     
    // Select first tab
    $('#myTab a:first').tab('show')
     
    // Select last tab
    $('#myTab a:last').tab('show')
     
    // Select third tab (0-indexed)
    $('#myTab li:eq(2) a').tab('show')
    

Эффект Fade

Чтобы получить эффект затухания для вкладок, добавьте .fade в каждую .tab-pane. Первая панель вкладок также должна иметь класс .in, чтобы правильно исчезать в исходном содержимом -

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = ".ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

Пример плагина табуляции с использованием атрибутов данных и эффекта затухания показан в следующем примере -

<ul id = ".myTab0" class = "nav nav-tabs">
   <li class = "active">
      <a href = ".home1" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
  
   <li><a href = ".ios" data-toggle = "tab">iOS</a></li>
           
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>
     
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = ".jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = ".ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
     
   </li>
           
</ul>
 
<div id = "myTabContent" class = "tab-content">
 
   <div class = "tab-pane fade in active" id = "home2">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples. You also have a
         <b>tryit</b> editor, wherein you can edit your code and
         try out different possibilities of the examples.</p>
   </div>
  
   <div class = "tab-pane fade" id = "ios1">
      <p>iOS is a mobile operating system developed and distributed
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the
         Darwin foundation. iOS is Apple's mobile version of the OS X
         operating system used on Apple computers.</p>
   </div>
  
   <div class = "tab-pane fade" id = ".jmeter2">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>
  
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
  
</div>

Методы Tab

.$().tab - Этот метод активирует элемент табуляции и контейнер содержимого. Вкладка должна иметь либо data-target или в href ориентации узла контейнера в DOM.

<ul class = "nav nav-tabs" id = ".myTab">
   <li class = "active"><a href = ".identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>
 
<div class = "tab-content">
   <div class = "tab-pane active" id = "home3">...</div>
   .....
</div>
 
<script>
   $(function () {
      $('#myTab1 a:last').tab('show')
   })
</script>

В следующем примере показано использование метода плагинов табов .tab. Здесь, в примере, активируется вторая вкладка iOS -

  <ul id = "myTab1" class = "nav nav-tabs">
   <li class = "active">
      <a href = ".home4" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
  
   <li><a href = ".ios2" data-toggle = "tab">iOS</a></li>
           
   <li class = "dropdown">
           
      <a href = "#" id = "myTabDrop2" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>
     
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop2">
         <li>
            <a href = ".jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         
         <li>
            <a href = ".ejb1" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
     
   </li>
           
</ul>
 
<div id = "myTabContent1" class = "tab-content">
 
   <div class = "tab-pane fade in active" id = "home5">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples. You also have a
         <b>tryit</b> editor, wherein you can edit your code and try
         out different possibilities of the examples.</p>
   </div>
  
   <div class = "tab-pane fade" id = "ios3">
      <p>iOS is a mobile operating system developed and distributed by
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
  
   <div class = "tab-pane fade" id = ".jmeter3">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>
  
   <div class = "tab-pane fade" id = "ejb1">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS,
         Web Logic etc.</p>
   </div>
  
</div>
 
<script>
   $(function () {
      $('#myTab1 li:eq(1) a').tab('show');
   });
</script>

События в Tab

В следующей таблице перечислены события для работы с плагином табуляции. Это событие может использоваться для подключения к функции.

Событие Описание Пример
show.bs.tabЭто событие срабатывает при показе вкладок, но до того, как будет показана новая вкладка. Используйте event.target и event.relatedTarget для таргетинга активной вкладки и предыдущей активной вкладки (если есть) соответственно.
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})
shown.bs.tabЭто событие срабатывает при показе вкладок после показа вкладки. Используйте event.target и event.relatedTarget для таргетинга активной вкладки и предыдущей активной вкладки (если есть) соответственно.
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

В следующем примере показано использование событий плагина табуляции. Здесь в примере мы отобразим текущие и предыдущие посещенные вкладки -

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
 
<ul id = "myTab2" class = "nav nav-tabs">
   <li class = "active">
      <a href = ".home6" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
  
   <li><a href = ".ios4" data-toggle = "tab">iOS</a></li>
           
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop3" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>
     
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop3">
         <li>
            <a href = ".jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
        
         <li>
            <a href = ".ejb2" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
     
   </li>
</ul>
 
<div id = "myTabConten2" class = "tab-content">
 
   <div class = "tab-pane fade in active" id = "home7">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples. You also have a
         <b>tryit</b> editor, wherein you can edit your code and try
         out different possibilities of the examples.</p>
   </div>
  
   <div class = "tab-pane fade" id = "ios5">
      <p>iOS is a mobile operating system developed and distributed by
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
  
   <div class = "tab-pane fade" id = ".jmeter4">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>
  
   <div class = "tab-pane fade" id = "ejb2">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
  
</div>
 
<script>
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text();
        
         // Get the name of previous tab
         var previousTab = $(e.relatedTarget).text();
        
         $(".active-tab span").html(activeTab);
         $(".previous-tab span").html(previousTab);
      });
   });
</script>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok