欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

Bootstrap Tab支持历史记录(History)- hash change

发布于 2013-11-26   bootstrap
jquery教程

Twitter Bootstrap Tab已经可以做出比较完美的tab切换效果,但是在切换的时候,地址栏的URL是不会变化的,也就是说没有办法记录历史状态,这直接导致没有办法通过前进后退来操作点击过的历史记录。目前关于这类问题的解决方案有很多,google一下jQuery hash或者jQuery history就可以看到很多解决方案,但是看了一圈,也没有完美支持bootstrap tab的。

我期望的解决方案是,完全不需要改动bootstrap tab的任何代码,包括js和html。
最后在github上发现了一个相对完美的解决方案,步骤如下:
1. 下载并包含 Ben Alman's hashchange plugin:http://benalman.com/projects/jquery-hashchange-plugin/
2. 程序中添加如下代码:

$(function(){
    // Function to activate the tab
    function activateTab() {
        var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']');
        activeTab && activeTab.tab('show');
    }

    // Trigger when the page loads

    activateTab();

    // Trigger when the hash changes (forward / back)
    $(window).hashchange(function(e) {
        activateTab();
    });

    // Change hash when a tab changes
    $('a[data-toggle="tab"], a[data-toggle="pill"]').on('shown', function () {
        window.location.hash = '/' + $(this).attr('href').replace('#', '');
    }); 
});
项目参考地址请点击

本文出自零度科技转载请注明出处:http://www.ldisp.com/a/jquery/2013/2412.shtml

上一篇:jQuery stopPropagation函数阻止事件冒泡
下一篇:chrome浏览器的桌面通知规范desktop notifications

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

1

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理