bootstrap源码学习与示例：bootstrap-tab

切换卡或叫标签页组件。它与scrollspy组件一样，分为两部分，触发区与面板区。触发区用于绑定点击事件，切换对应的面板。

切换区为一个UL列表，要求UL带"nav nav-tabs"或"nav nav-pills"这两种类名。li下的标签要求有 data-toggle="tab"属性，你可以通过data-target或href指定对应的面板。

面板区要求就相对宽松些，容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名。

        <ul id="mytab" 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>

这样你直接引入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="https://files.cnblogs.com/rubylouvre/bootstrap.css"/> <script src="https://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> <script src="https://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script> <script src="https://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