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

@tartartartar

感谢您回来并发布您的最终解决方案！我一直在尝试使可链接的选项卡对我来说正常运行。您的“混合”代码工作得很好，除了在没有哈希的情况下使第一个选项卡处于活动状态，在没有哈希的情况下使使用“后退”按钮，都可以。我正在使用.active类，所以可能有所作为。为了使第一个选项卡在没有哈希的情况下处于活动状态，我在第一个else语句之后添加了一个if语句：

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与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;

在alert(activeTab.length);语句之前设置了if之后，我注意到它会为哈希返回“ 1”，而没有哈希返回“ 4”，因此我添加了一个标识运算符{{1} }检查值。我还添加了===，以确保同时没有两个活动标签页：

.removeClass

Answer 2

我想我会和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 3

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

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*/

}

所以，非常感谢！

具有历史记录的可链接标签-后退按钮问题

3 个答案: