📌  相关文章
📜  Bootstrap-Tab插件

📅  最后修改于: 2020-10-27 06:22:25             🧑  作者: Mango

 

在Bootstrap导航元素一章中介绍了选项卡。通过合并一些数据属性，您可以轻松创建选项卡式界面。使用此插件，您甚至可以通过下拉菜单在选项卡或药丸中的本地内容窗格之间切换。

如果要单独包含此插件功能，则需要tab.js。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法

您可以通过以下两种方式启用标签页-

  • 通过数据属性-您需要将data-toggle =“ tab”或data-toggle =“ pill”添加到锚点。

    将nav和nav-tabs类添加到选项卡ul将应用Bootstrap标签样式，而添加nav和nav-pills类将应用药丸样式。
  • 通过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添加到每个.tab-pane中。第一个选项卡窗格还必须具有.in才能正确淡入初始内容-


   
...

   
...

   
...

   
...

例

以下示例显示了使用数据属性和淡入淡出效果的选项卡插件的示例-

现场演示





   

      
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.

   

   
   

      
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.

   

   
   

      
jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.

   

   
   

      
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.

方法

。$()。tab-此方法激活一个tab元素和内容容器。 Tab应该在DOM中具有以数据为目标或以href为目标的容器节点。





   
...

   .....

例

以下示例显示了选项卡插件方法.tab的用法。在此示例中，第二个选项卡iOS已激活-

现场演示





   

      
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.

   

   
   

      
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.

   

   
   

      
jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.

   

   
   

      
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.

大事记

下表列出了可与Tab插件一起使用的事件。此事件可用于挂接到函数。

Event Description Example
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. 
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. 
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

例

以下示例显示了选项卡插件事件的使用。在此示例中，我们将显示当前和以前访问的选项卡-

现场演示


Active Tab: 


Previous Tab: 









   

      
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.

   

   
   

      
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.

   

   
   

      
jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.

   

   
   

      
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.