使用 if 语句为锚位置激活样式答案

【问题标题】：Activate style with if statements for anchor position使用 if 语句为锚位置激活样式
【发布时间】：2013-07-07 06:59:53
【问题描述】：

我是初学者，已经彻底搜索了，没有找到解决这个问题的方法。

我写了一段代码，当你点击一个链接时，css 样式会发生变化，如下所示：

function spHome(){
    document.getElementById("btnHome2").style.background = "url(../images/btn_navHoverArrow.png) no-repeat center bottom";
    document.getElementById("btnAccount").style.background = "0";
}

function spAccount(){
    document.getElementById("btnHome2").style.background = "0";
    document.getElementById("btnAccount").style.background = "url(../images/btn_navHoverArrow.png) no-repeat center bottom";
}

这段代码运行良好。对我来说，问题是当我刷新页面时，点击状态不再活跃。是否有代码允许该功能仅在用户位于页面的某个锚点时才保持活动状态。例如，如果我们有一个名为 index.html#home 的锚点位置，则主页按钮将处于活动状态，当单击 index.html#account 时，帐户按钮将即使在页面刷新后仍保持点击状态。

下面的示例似乎不适用于 jsfiddle，但在所有浏览器上都可以： http://jsfiddle.net/JoshuaWaheed/HZLVt/3/

有没有办法做到这一点？

【问题讨论】：

标签： javascript css refresh anchor if-statement

【解决方案1】：

添加 href 哈希并返回 false onclick 以避免页面重新加载

<a href="#home" onclick="spHome();return false" id="btnHome2" title="Home"></a>

你需要在页面加载时执行js，检查url的hash，并将按钮的状态对应hash。

使用 jQuery，它会是这样的（未测试）：

$(function() {

    if (document.location.hash == "#home")
        spHome()
    else
        if (document.location.hash == "#account")
            spAccount()
})

如果您不想使用 jQuery，可以将该代码放在文档事件“load”上

【讨论】：

您好 jperelli，非常感谢。这完美地工作。我应用了 return false 但刷新页面时它只转到一个锚点；删除它后，代码开始完美运行。再次非常感谢您。