更改URL不會更改選項卡

我正在實施，如果我刷新頁面，它應該使以前選擇的選項卡（保留選定的選項卡）處於活動狀態。所以我創建一個簡單的html頁面並添加一些jQuery。
但是，如果我手動更改URL像file:///home/2.html#news到file:///home/2.html#home更改URL不會更改選項卡

它改變頁面的內容只，但不會改變標籤上，被選中。。

這是我的代碼。

<body> 
    <ul> 
     <li id="first"><a href="#home">Home</a></li> 
     <li id="second"><a href="#news">News</a></li> 
     <li id="third"><a href="#contact">Contact</a></li> 
     <li id="forth"><a href="#about">About</a></li> 
    </ul> 
    <p id="home"> 
     home section 
    </p> 
    <p id="news"> 
     news section 
    </p> 
    <p id="contact"> 
     contact section 
    </p> 
    <p id="about"> 
     about section 
    </p> 
</body> 
    <style> 
    p{ 
    display: none; 
    } 
    :target { 
    display:block; 
     border: 2px solid #D4D4D4; 
     background-color: #e5eecc; 

    } 
    </style> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     if(localStorage.getItem("active_state") == null){ 
      activeStateId = "first"; 
     } 
     else{ 
      activeStateId = localStorage.getItem("active_state") 
     } 
     $('#'+activeStateId).addClass('active'); 
     $('li').click(function(){ 
      $('.active').removeClass('active'); 
      $(this).addClass('active'); 
      localStorage.setItem("active_state", $(this).attr('id')); 
     }); 
    }); 
</script>

來源

2016-11-20 TheVinspro

可能需要在服務器上運行該頁面。 localStorage是域特定的，當你使用文件協議時可能甚至不可用（儘管如此）。如果你還沒有設置本地主機服務器，很容易做到，而且有很多種方法可以運行一個......所有這些都很容易研究。 Web開發很少使用文件協議完成，因爲還有其他限制，例如沒有ajax – charlietfl

感謝@charlietfl的回答。但我怎麼能通過創建一個簡單的HTML來做到這一點。 – TheVinspro

@TheVinspro你可能不能。我認爲有一個標誌可以啓動Chrome，它可以消除對文件協議的一些限制，但一般來說，最好是使用本地服務器，正如charlietfl所建議的那樣，或者使用自動開發的開發工具，就像WebStorm – hlfrmn

當你有鏈接哈希，你不實際重新加載頁面，但瀏覽器只是觸發這些鏈接。您依靠CSS :target更改規則，該規則每次在url上更改#hash時都會進行評估。

p { 
    display: none; 
} 

:target { 
    display:block; 
    border: 2px solid #D4D4D4; 
    background-color: #e5eecc; 
}

因此，即使沒有刷新頁面，您也可以正確更新所有部分。爲了具有這種功能，您不需要將任何數據存儲到本地或遠程機器，因爲您正在使用URL上的散列。只需使用哈希和處理hashchange事件到.activate類添加到像這樣的鏈接：

$(document).ready(function() { 
    var hash = window.location.hash; 

    if(hash.length > 0) { 
     hash = hash.substring(1); 
     $('li a[href$='+hash+']').parent().addClass('active'); 
    } 

    $(window).on('hashchange', function() { 
     $('.active').removeClass('active'); 
     var hash = window.location.hash 
     if(hash.length > 0) { 
      hash = hash.substring(1); 
      $('li a[href$='+hash+']').parent().addClass('active'); 
     } 
    }); 
});

這裏檢查我的工作例如：http://zikro.gr/dbg/html/urlhash.html#about

來源

2016-11-20 23:08:25

謝謝@Christos Lytras，是的，它的工作。 – TheVinspro

@TheVinspro高興我的答案正在爲你工作。如果它對您有幫助，請將其標記爲接受的答案。要了解如何將答案標記爲已接受，請閱讀[如何接受答案？]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）。 –

更改URL不會更改選項卡

回答

相關問題