具有历史记录的可链接选项卡 - 后退按钮问题

Question

我需要你的帮助，我想要标签链接，目前效果很好，问题是历史：当我们点击浏览器的后退按钮时，地址变化很好，但是该选项卡未打开... （我使用 jQuery 和 boostrap）

html:

    <ul class="nav nav-tabs tpl-tabs animate">
      <li class="active"> <a href="#tab1" data-toggle="tab">Tab1</a> </li>
      <li> <a href="#tab2" data-toggle="tab">Tab1</a> </li>
      <li> <a href="#tab3" data-toggle="tab">Tab3</a> </li>
    </ul>

JS：（添加以制作可链接的标签）

var hash = document.location.hash;
var prefix = "tab_";

if(hash){
    $(".nav-tabs a[href=" + hash.replace(prefix, "") + "]").tab("show");
        }

$(".nav-tabs a").on("shown.bs.tab", function(e){
    window.location.hash = e.target.hash.replace("#","#" + prefix);
        });

Answer 1

我想我会和onhashchange听众一起去。

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

或者如果您想创建更强大的解决方案，我会使用本文中的内容：

http://www.redotheweb.com/2012/05/17/enable-back-button-handling-with-twitter-bootstrap-tabs-plugin.html

在哪里可以找到如何正确使用历史记录 API

Answer 2

谢谢mkbctrl 的回复！我认为这似乎可行，我混合使用了两种代码以避免在我们使用历史记录时滚动到 ID，并且为了在特定选项卡上直接 link。它肯定不是很干净，因为我是初学者，但它有效！

var prefix = "tab_";
var hash = document.location.hash;
if(hash){
        $(".nav-tabs a[href=" + hash.replace(prefix, "") + "]").tab("show");
    }

$('a[data-toggle="tab"]').on('click', function() {
        history.pushState(null, null, $(this).attr('href').replace("#","#" + prefix));
    });

    function locationHashChanged() {
            var activeTab = $("[href=" + document.location.hash.replace(prefix,"") + "]");
            if (activeTab.length) {
                activeTab.tab('show');
            } else {
              $('.nav-tabs a:first').tab('show');
            }
        }
    window.onhashchange = locationHashChanged;

我从 bootstrap.css 中删除了这个，因为我在使用历史记录时遇到了显示问题：

.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
/*background-color:#eee; Removed*/

}

所以，非常感谢！

Answer 3

@tartartartar

感谢您回来发布您的最终解决方案！我一直在尝试让可链接的标签为我正常运行。您的 "mixture" 代码运行良好，除了在没有散列的情况下使第一个选项卡处于活动状态，以及在没有散列的情况下使用后退按钮。我正在使用 .active 类，所以这可能有所不同。如果没有哈希，为了使第一个选项卡处于活动状态，我在第一个 if 语句之后添加了一个 else 语句：

var prefix = "tab_";
var hash = document.location.hash;
if(hash){
   $(".nav-tabs a[href=" + hash.replace(prefix, "") + "]").tab("show");
} else {
   $('.nav-tabs a:first').addClass('active');
  }

以下代码适用于使用后退按钮，直到没有散列（index.html vs index.html#tab_blue）：

function locationHashChanged() {
  var activeTab = $("[href=" + document.location.hash.replace(prefix,"") + "]");
  if (activeTab.length) {
    activeTab.tab('show');
  } else {
      $('.nav-tabs a:first').tab('show');
    }
}
window.onhashchange = locationHashChanged;

在 if 语句之前设置一个 alert(activeTab.length); 之后，我注意到它 return “1”表示哈希，“4”表示没有哈希，所以我添加了一个身份运算符 === 来检查值。我还添加了一个 .removeClass 以确保不会同时有两个活动选项卡：

if (activeTab.length === 1) {
  activeTab.tab('show');
} else {
    $('.nav-tabs li').removeClass('active');
    $('.tab-content ul').removeClass('active');
    $('.nav-tabs li:first').addClass('active');
    $('.tab-content ul:first').addClass('active');
  }
}
window.onhashchange = locationHashChanged;

具有历史记录的可链接选项卡 - 后退按钮问题

Linkable tabs with history - Back button problem

jquery

tabs

history

hyperlink

back