选项卡Tabs是Web中一种非常常用的功能。用户点击对菜单项，能切换出对应的内容。本文将详细介绍Bootstrap选项卡
Bootstrap框架中的选项卡主要有两部分内容组成：
1、选项卡菜单组件，对应的是Bootstrap的nav-tabs
2、可以切换的选项卡面板组件，在Bootstrap中通常tab-pane来表示
在Bootstrap框架中选项卡nav-tabs已带有样式，而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的
1、选项卡导航链接中要设置data-toggle="tab"
【渐入效果】
为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名fade，让其产生渐入的效果。
在添加fade样式时，最初的默认显示的内容面板一定要加上in类名，不然用户无法看到其内容
【胶囊式选项卡】
在Bootstrap除了可以让nav-tabs具有选项卡的切换功能之外，还可以让胶囊式nav-pills导航也具有选项卡的功能。只需要将nav-tabs换成nav-pills，另外关键一点是将data-toggle="tab"换成data-toggle="pill"
除了在HTML设置data-toggle来触发选项卡之外，还可以通过JavaScript直接调用。
在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的data-toggle="tab"或data-toggle="pill"的属性，然后通过下面的脚本来调用
【事件订阅】
【1】IIFE
使用立即调用函数，防止插件内代码外泄，从而形成一个闭环，并且只能从jQuery的fn里进行扩展
+function($){//使用es5严格模式'usestrict';//}(window.jQuery);【2】初始设置
functionPlugin(option){//根据选择器，遍历所有符合规则的元素returnthis.each(function(){var$this=$(this)//获取自定义属性bs.tab的值vardata=$this.data('bs.tab')//如果值不存在，则将Tab实例设置为bs.tab值if(!data)$this.data('bs.tab',(data=newTab(this)))//如果option传递了string，则表示要执行某个方法if(typeofoption=='string')data[option]()})}varold=$.fn.tab//保留其他库的$.fn.tab代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码$.fn.tab=Plugin//重设插件构造器，可以通过该属性获取插件的真实类函数$.fn.tab.Constructor=Tab【5】防冲突处理
$.fn.tab.noConflict=function(){//恢复以前的旧代码$.fn.tab=old//将$.fn.tab.noConflict()设置为Bootstrap的Tab插件returnthis}【6】绑定触发事件
varclickHandler=function(e){//阻止默认行为e.preventDefault()//触发show()方法Plugin.call($(this),'show')}$(document)//在document上绑定单击事件.on('click.bs.tab.data-api','[data-toggle="tab"]',clickHandler).on('click.bs.tab.data-api','[data-toggle="pill"]',clickHandler)