Admin LTE模板实现sidebar菜单联动tabs页签（你值得拥有）

说在前面的话：
        该组件主要使用Admin LTE 实现Tab页联动sidebar。实现的目标是：
            1、不改动Admin LTE的模板框架（Bootstrap v3.4.1）；
            2、tab页的加载默认使用ajax的get方式，详见(bootstrap.addtabs.js)；不用iframe；
            3、sidebar标题与tab页的联动；
            4、tab标签页的动态滚动（左滚、右滚，左右滚动一屏）;
            5、右键菜单（关闭左侧、右侧、其他，全部关闭，刷新）；
            6、全屏

效果展示

#### index.html中删除

包含的代码块，并添加如下

    
    

        
            
                
            
        
        

            

                

                    欢迎页
                    
                
            
        
        
            
                
            
        
        
            
        
    
    
    

        

            I'm a homepage.
        
    

#### 将sidebar部分代码

下`li`中的的`*.html`替换成

其中a标签还可以添加如下属性，分别对应下面几种情况

// 指定tab页内容
data-content="Customize the content"
// 使用ajax
data-ajax="true"
// 设置tab页签标题
data-title="Customize the title"
// 指定在哪个tab页内容中显示
data-target="#tabs2"

其中的data-url届时换成后台请求地址即可#### 删除页面无需引用的js

#### 引入bootstrap.addtabs.css

#### 引入bootstrap.addtabs.js同时修改bootstrap.min.js为bootstrap.js

#### bootstrap.js中添加tab选项卡滚动代码

var clickHandler = function(e) {
    e.preventDefault()
    Plugin.call($(this), 'show')

    // 新增滚动功能
    scrollToTab($(this).closest("li.active"))
}

//计算多个jq对象的宽度和
var calSumWidth = function(element) {
    var width = 0;
    $(element).each(function() {
        width += $(this).outerWidth(true);
    });
    return width;
};
//滚动到指定选项卡
var scrollToTab = function(element) {
    var marginLeftVal = calSumWidth($(element).prevAll()), //前面所有tab的总宽度
        marginRightVal = calSumWidth($(element).nextAll()); //后面所有tab的总宽度
    var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
    var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
    var scrollVal = 0;
    if($(".page-tabs-content").outerWidth() < visibleWidth) {
        scrollVal = 0;
    } else if(marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
        if((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
            scrollVal = marginLeftVal;
            var tabElement = element;
            while((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                scrollVal -= $(tabElement).prev().outerWidth();
                tabElement = $(tabElement).prev();
            }
        }
    } else if(marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
        scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
    }
    //执行动画
    $('.page-tabs-content').animate({
        marginLeft: 0 - scrollVal + 'px'
    }, "fast");
};


#### 相关源码：希望各位看官达人多多支持
（3.65元——微信打赏，一年365天）（打赏后博客评论留言--邮箱地址，将及时发送源码）