Question

我是初学者并且已经彻底搜查过，找不到解决此问题的方法。

我编写了一个代码，当你点击一个链接时，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/

有没有办法让这种情况发生？

Answer 1

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

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

你需要在页面加载时执行js，检查url的哈希值，并将按钮的状态相应地放入哈希值。

使用jQuery，它会像（未经测试）：

$(function() {

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

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

使用锚定位置的if语句激活样式

1 个答案: