BootStrap-CSS样式_插件_选项卡(Tab)插件

标签页（Tab）插件

标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松 地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下 拉菜单标签页中。 如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章 中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 

用法

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

通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。 
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添 加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

 
   
Home
 
... 
 

通过 JavaScript：您可以使用 Javscript 来激活各个标签页，如下所示： 

$('#myTab a').click(function (e) { 
  e.preventDefault() 
  $(this).tab('show') 
})

淡入淡出效果 

 如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面

 
  
...
 
  
...
 
  
...
 
  
...
 

代码实例

    
    
    
    
    
    
    
    


    

        

            

                
JS自定义激活home选项卡
                
JS自定义激活.NET选项卡
                
JS自定义激活ios选项卡
                
JS自定义激活jmeter选项卡
                
JS自定义激活ejb选项卡
            
        
        

            
激活的标签页：
            
            
前一个激活的标签页：
            
            

            

                

                    W3Cschool Home
                
                
.NET
                
                
iOS
                
                

                    Java 
                    
                
                    

                        
jmeter
                        
                        
ejb
                        
                    
                
            
        
            

                

                    
W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。
                
                

                    
.NET是微软下一代的操作平台，它允许人们在其上构建各种应用方式，使人们尽可能通过简单的方式，多样化地、最大限度地从网站获取信息，解决网站之间的协同工作，并打破计算机、设备、网站、各大机构和工业界间的障碍－－即所谓的“数字孤岛”，从而实现因特网的全部潜能，搭建起第三代互联网平台。
                
                

                    
iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
                
        
                

                    
jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
                
                

                    
Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
                    
                
            
        
    

    

显示效果：