tab栏——选项卡改版，tab栏改版

tab栏——选项卡改版，tab栏改版

最近一直比较忙，终于抽出时间来更新点知识，在开发中我们不难遇到一些奇葩的需求，今天介绍的就是tab改版【tab就是后台管理系统开发最常见的选项卡切换】，为什么说改版呢，简单来说就是界面有四个选项卡，当我们的用户正在浏览第四个tab时，想要刷新当前的数据时，一般人都会选择点击手动刷新或者右键菜单【重新加载】，这时选项卡跳到了第一个也就是默认的拥有active类的，显然用户并不想要这样的结果……废话就不多说了，我要改版的就是当用户执行手动刷新，刷新结束后，页面还停留在当前的tab：

简单说说实现思路就是获取地址栏，给每一个tab选项卡拼接一个特有的参数，大个比方我们的url=‘https://mp.csdn.net/postedit’，页面有三个tab，那么就是第一个tab拼接一个参数tab=1，拼接后url=‘https://mp.csdn.net/postedit？tab=1’,同理后面的依次为：‘https://mp.csdn.net/postedit？tab=2’，‘https://mp.csdn.net/postedit？tab=3’；

下面把我实现的核心代码贡献出来：

第一：我们要获取当前拥有tab栏的地址栏参数：

// 获取地址栏参数——api
    function fGetUrlParam(sParamName) {
        if (!sParamName) {
            return '';
        }
        var reg = new RegExp("(^|&)" + sParamName + "=([^&]*)(&|$)");
        var url = window.location.search.substr(1);
        var r = url.match(reg);
        return r ? decodeURIComponent(r[2]) : '';
    }

第二：实现拼接后的功能—把我们之前的通过索印控制的方式显示以及隐藏对应的tab，改为我们拼接的tab值

//这个是我命名的初始化函数
function Init() {
        var tab = fGetUrlParam('tab') || 10;
        if (tab == 10 || !tab) { //tab1
            //此处调用相应的函数加载数据
        }
        if (tab == 11) { //tab2
            //此处调用相应的函数加载数据
        }
        if (tab == 12) { //tab3
            //此处调用相应的函数加载数据
        }
        $('.resultAmount li[data-id=' + tab + ']').addClass('li_this').siblings().removeClass('li_this');//这个是tab bar
        $('.ExtendCtrolTab .listItemCtrol').eq(tab - 10).addClass('showThis_item').siblings().removeClass('showThis_item');//这一行是对应要显示的内容区块
    };

上面这块我是设置并获取每一个tab对应的li标签的 自定义属性

第三就是最直接的一步，那就是点击事件：

//点击事件 
$('.resultAmount li').click(function() {
            var tabId = $(this).attr('data-id');//获取自定义属性
            var tab = fGetUrlParam('tab') || 10;//调用获取地址栏参数的api，如果为空默认显示data-id=10的那个tab
            if (tabId != tab) {
                location.href = location.href.split('?')[0] + '?tab=' + tabId;
            }
  })

 

 附上实现效果：

 

核心代码就是这些啦，小伙伴们抽空就试试吧……