切换卡或叫标签页组件。它与scrollspy组件一样，分为两部分，触发区与面板区。触发区用于绑定点击事件，切换对应的面板。
切换区为一个UL列表，要求UL带"nav nav-tabs"或"nav nav-pills"这两种类名。li下的标签要求有 data-toggle="tab"属性，你可以通过data-target或href指定对应的面板。
面板区要求就相对宽松些，容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名。
111
2222
333
444.
这样你直接引入JS就能用了，但你必须为当中某个标签页的LI元素指定"active"类名
如果你想用JS明确指定哪个面板被激活，你是要对它的某个标签页的链接使用tab("show")方法，而不是作用于它的容器上。这个与其他jQuery插件有点不同。
$(function () { $('.nav-tabs a:last').tab('show') }) !function ($) { "use strict"; // jshint ;_; /* TAB CLASS DEFINITION * ==================== */ var Tab = function (element) { this.element = $(element) } //整个控件分两部分,触发区与面板区 Tab.prototype = { constructor: Tab , //这是用于切换触发区与相关事件,并在里面调用切换面板的activate show: function () { var $this = this.element , $ul = $this.closest('ul:not(.dropdown-menu)')//找到触发区的容器 , selector = $this.attr('data-target')//取得对应的面板的CSS表达式 , previous , $target , e if (!selector) { selector = $this.attr('href')//没有则从href得到 selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 } if ( $this.parent('li').hasClass('active') ) return previous = $ul.find('.active:last a')[0]//对得之前被激活的链接 e = $.Event('show', { relatedTarget: previous }) $this.trigger(e) if (e.isDefaultPrevented()) return $target = $(selector) this.activate($this.parent('li'), $ul) this.activate($target, $target.parent(), function () { $this.trigger({ type: 'shown' , relatedTarget: previous }) }) } , //这方面不应该放到原型上，应该做成私有方法 activate: function ( element, container, callback) { var $deactivate = container.find('> .active') , transition = callback && $.support.transition && $deactivate.hasClass('fade') function next() { //让之前的处于激活状态处于激活状态 $deactivate .removeClass('active') .find('> .dropdown-menu > .active') .removeClass('active') //让当前面板处于激活状态 element.addClass('active') if (transition) { element[0].offsetWidth // reflow for transition element.addClass('in') } else { element.removeClass('fade') } if ( element.parent('.dropdown-menu') ) { element.closest('li.dropdown').addClass('active') } //执行回调，目的是触发shown事件 callback && callback() } transition ? $deactivate.one($.support.transition.end, next) : next() //开始触发CSS3 transition回调 $deactivate.removeClass('in') } } /* TAB PLUGIN DEFINITION * ===================== */ var old = $.fn.tab $.fn.tab = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('tab') if (!data) $this.data('tab', (data = new Tab(this))) if (typeof option == 'string') data[option]()//show }) } $.fn.tab.Constructor = Tab /* TAB NO CONFLICT * =============== */ $.fn.tab.noConflict = function () { $.fn.tab = old return this } /* TAB DATA-API * ============ */ //要求触发区必须存在[data-toggle="tab"]或[data-toggle="pill"]属性 $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { e.preventDefault() $(this).tab('show') })}(window.jQuery); <!DOCTYPE html> <html> <head> <title>bootstrap学习 by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-tab.js"></script> <script> $(function () { var log = function(s){ window.console && console.log(s) } $('.nav-tabs a:last').tab('show') $('a[data-toggle="tab"]').on('show', function (e) { log(e) }) $('a[data-toggle="tab"]').on('shown', function (e) { log(e.target) // activated tab log(e.relatedTarget) // previous tab }) }) </script> </head> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">首页</a></li> <li><a href="#profile" data-toggle="tab">介绍</a></li> <li><a href="#messages" data-toggle="tab">消息</a></li> <li><a href="#settings" data-toggle="tab">设置</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">111</div> <div class="tab-pane" id="profile">2222</div> <div class="tab-pane" id="messages">333</div> <div class="tab-pane" id="settings">444.</div> </div> </body> </html> 运行代码
它要引入navs.less