tab组建

$(function () {
        jQuery.fn.tabs = function (control) {
            var $element = $(this),
                $control = control;
            
            $element.on('click','[data-tab]',function () {
                var tabName = $(this).attr('data-tab');
                $element.trigger('change.tabs',tabName);
            });
            
            $element.on('change.tabs',function (e,tabName) {
                $element.find('[data-tab]').removeClass('active');
                $element.find('[data-tab="'+tabName+'"]').addClass('active');
                window.location.hash = tabName;
            });
            
            $element.on('change.tabs',function (e,tabName) {
                $control.find('[data-tab]').removeClass('active');
                $control.find('[data-tab="'+tabName+'"]').addClass('active');
            });
            
            $(window).bind('hashchange',function () {
                var tabName = window.location.hash.slice(1);
                $element.trigger('change.tabs',tabName);
            });
            
            var firstName = $element.find('[data-tab]').eq(0).attr('data-tab');
            $element.trigger('change.tabs',firstName);
            
            return this;
        };
        
        $('#tabs').tabs($('#content'));
    });