使用JavaScript鏈接的哈希鏈接存在問題

Question

因此，我的網站在標題中具有下拉菜單，這些菜單鏈接到不同頁面的子頁面。 就像主按鈕鏈接到about.php和懸停菜單鏈接到about.php#contacts等...

現在，在這些頁面的每個頁面上，它們都是子頁面，它們不是單獨的頁面，而是使用JavaScript函數修改顯示CSS值來​​打開/關閉。

因此，如果我在索引上，然后單擊about.php#contacts ，則可以很好地顯示聯系人內容。 但是，如果我在“關於”頁面上，則任何帶有指向“關於”頁面的哈希的鏈接均不起作用。 對於其他頁面，它將起作用，但是如果哈希鏈接指向當前頁面，則它將不起作用。 在地址欄中，URL發生了變化，但是我猜測需要強制重新加載頁面或腳本以顯示新內容。

這是我正在使用的相關代碼，有沒有更好的方法來完成我想做的事情？

//Drop down
<ul><li><a href="about.php">About Us</a>
<ul><li><a href="about.php#profile">contacts</a></li>
//More..
</ul></li></ul>

//Menu on  the page
<ul>
<li><a href="javascript:showlayer('contacts');"><span>Contacts</span></a></li>
//More
</ul>

//Javascript code that handles everything
<script language="javascript">
var hash = window.location.hash;
var selectedDiv = hash.split('#')[1];
if(selectedDiv != null)
{
    showlayer(selectedDiv);
}
function showlayer(name){
    document.getElementById("contacts").style.display = "none";
    //More
    document.getElementById(name).style.display = "block";  
}
</script>

Answer 1

單擊指向具有不同哈希值的當前頁面的鏈接不會重新加載該頁面。

相反，您需要向hashchange事件添加處理程序，並在那里也運行代碼。

更好的是，將代碼完全替換為CSS :target選擇器。