Question

我使用引导标签并为每个标签添加了一个网址。

所以，如果有人访问www.example.com/index.html#contact。它将它们带到正确的页面（联系页面）。问题是我有一个链接到每个选项卡的主页。当您点击＆＃34;联系＆＃34;在主页上它应该重定向到www.example.com/index.html#contact，而是转到主页面，即＃34;关于我们＆＃34;，甚至认为顶部的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();  
});

标签链接不会重定向到右侧页面

1 个答案: