LTE Admin 模板实现sidebar菜单联动tabs页签

    
    

        
            
                
            
        
        
            

                

                    欢迎页
                    
                
            
        
        
            
                
            
        
        
            
        
    
    
    

        

            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  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");
};

#### 相关源码：希望各位看官达人多多支持（9.99元—微信打赏，一年365天）

（打赏后评论留言或者备注留言——已支持，你的邮箱地址，模板名称，

例如：已支持，xxxx@qq.com，lte，将及时发送源码）