使用javascript链接的哈希链接问题

时间:2013-02-26 23:16:29

标签: php javascript drop-down-menu hash menu

所以我的网站在标题中有下拉菜单,链接到不同页面的子页面。就像指向about.php的主按钮链接和指向about.php#contacts等的悬停菜单链接一样......

现在,在这些子页面的每个页面上,它们不是单独的页面,而是使用javascript函数打开/关闭以修改显示css值。

因此,如果我在索引上,并点击about.php#contacts,联系人内容就会正常显示。但是,如果我在about页面上,任何带有指向about页面的哈希的链接都不起作用。对于其他页面,它将起作用,但如果哈希链接指向当前页面,则它不起作用。在地址栏中,网址会更改,但我猜测需要强制重新加载页面或脚本以显示新内容。

以下是我正在使用的相关代码,有没有更好的方法来完成我想要做的事情?

//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>

1 个答案:

答案 0 :(得分:1)

单击指向具有不同哈希值的当前页面的链接将不会重新加载页面。

相反,您需要为hashchange事件添加处理程序并在那里运行代码。

更好的是,完全使用CSS :target选择器替换您的代码。