Question

网络设置

我有tab-pane有效。
反弹到其他元素并触发其他tabs的元素。
使用Bootstrap和jquery。

目标

当用户点击导航链接时，我将元素ID和活动PANE存储为URL作为哈希。 http://www.mywebsite.com/#pane#id
我想将其存储到浏览器历史记录中，因此当用户按下BACK或FORWARD按钮时，我可以下拉BACK url解析位置激活PANE和scrollTop元素`ID＆＃39;。
显然，当BACK或FORWARD按钮离开我们的域名时，我想在离开页面之前警告用户。
我希望这适用于浏览器IE8并转发。当前FireFox，CHROME和OPERA。
奖励，如果这可以在移动网络浏览中使用。

研究

我在下面找到了链接和项目，但我不确定这些是解决我问题的最新或最佳解决方案。

https://github.com/blixt/js-hash

Keeping history of hash/anchor changes in JavaScript

How to get the anchor from the URL using jQuery?

问题

这是否有可能，因为我读到你无法改变BROWSER HISTORY - 这是有道理的。
上述项目是否合适？或者是否有更好的解决方案可以满足我的愿望清单？
是否可以创建一个全局jquery点击侦听器，该侦听器在我的任何其他侦听器之前运行，只需获取元素ID并激活PANE然后将它们存储到Array中。我只是拦截后退/前进按钮事件获取Array对象并从中设置DOM。

感谢您的帮助！

Answer 1

// Change HASH on clicking NAV buttons. 
$(function(){
  var hash = window.location.hash;
  //hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    $('html,body').animate({scrollTop: $('#top').offset().top});
    window.location.hash = this.hash;
    _ignoreHashChange = true;
    console.log(this.hash);

  });
});

    // Updating the dom with hashchange.
//_ignoreHashChange = true; //after clicking a butotn. 
_ignoreHashChange = false;
$(window).on('hashchange', function (e) {
    if(_ignoreHashChange === false ){
        if ( window.location.hash.split('#')[1].length ) {
            if ( window.location.hash.split('#')[1][0] !== "." ) {
                $('.nav-tabs a[href="#'+ window.location.hash.split('#')[1] +'"]')[1].tab('show');
                $('html,body').animate({scrollTop: $('#top').offset().top});
            }
            else {
                $(window.location.hash.split('#')[1]).trigger("click");
            }
            _ignoreHashChange = false;
        }
    }
    _ignoreHashChange = false;
});

单击BACK或FORWARD按钮时，使用对象更改DOM

1 个答案: