標籤鏈接沒有重新指向正確的頁面

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(); 
});