标签链接未重定向到正确的页面

Question

我正在使用引导选项卡，并为每个选项卡添加了一个 url。

所以，如果有人访问 www.example.com/index.html#contact。它将他们带到正确的页面（联系页面）。 问题是我有一个链接到每个选项卡的主页。当您单击主页上的“联系人”时，它应该重定向到 www.example.com/index.html#contact，但它会转到主页，即“关于我们”，即使顶部的 URL 显示www.example.com/index.html#contact 而不是 www.example.com/index.html#about。

我希望这是有道理的。 这是我的代码：

主页：（当您单击图像时，它会将您带到该页面）

<div id="row1">
<a href="http://example.index.html#conference"><img src="images/About_Photo_Red.jpg" width="33%" id="about"></a>
<a href="http://example.com/index.html#conference"><img src="images/Conference_Photo_Red.jpg" width="33%" id="conference"></a>
<a href="http://example.com/index.html#sponsors"><img src="images/Sponsors_Photo_Red.jpg"width="33%" id="sponsors"></a>
</div>

标签：

<div class="tabs" id="navtabs">
    <div class="collapse navbar-collapse">
        <ul class="nav nav-pills head-menu" id="navbar">
            <li class="active"><a href="#about" data-toggle="tab" class="scroll">About Us</a></li>
            <li><a  href="#conference" data-toggle="tab" class="scroll">Conference</a></li>
            <li><a href="#sponsors" data-toggle="tab" class="scroll">Sponsors</a></li>
            <li class="disabled"><a href="#">Gallery</a></li>
            <li><a href="#contactus" data-toggle="tab"class="scroll">Contact Us</a></li>
        </ul>
    </div>

Java 脚本

$(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
  });

  // navigate to a tab when the history changes
  window.addEventListener("popstate", function(e) {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
    $(this).scrollTop(0);
    } else {
      $('.nav-pills a:first').tab('show');
    }

  });
});

Answer 1

请注意，popstate 事件仅在执行实际浏览器操作时触发；调用 history.pushState 不会触发事件。

也就是说，如果您将历史处理程序从事件侦听器中取出并放入独立函数中，您可以在页面加载时手动调用它（为了安全起见；有些浏览器会在页面加载时触发 popstate 事件，而有些浏览器会触发不是）并且在您推送历史记录之后。

例子：

$(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
    updateTabs();
  });

  function updateTabs() {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
      $(window).scrollTop(0);
    } else {
      $('.nav-pills a:first').tab('show');
    }
  }

  // navigate to a tab when the history changes
  window.addEventListener("popstate", updateTabs);

  // make sure the correct tab is set on pageload
  updateTabs();  
});