标签链接没有重新指向正确的页面

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事件仅在实际浏览器操作i采取;打电话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(); 
});