Question

我创建了一个网站，在选择菜单栏中的项目后，屏幕会移动到页面上的特定位置。然后我创建了一个函数，其中文本在两个位置发生变化，＆＃34; titletext＆＃34;和＆＃34;信息文件＆＃34;。例如：

<li><a href="#content" onclick='changeText()'>Weeee!</a></li>

它有效但现在我意识到我遇到了问题：当我选择返回上一页时，文本保持不变，直到用户选择刷新页面。

使用Javascript，如何（例如）页面在#content时更改文本并在主页上再次更改文本时如何告知网站更改文本？我是否必须对我的代码采取不同的方法？

以下是我的changeText（）代码：

function changeText(){
    document.getElementById('titletext').innerHTML = 'Mission Statement';
    document.getElementById('infotext').innerHTML = 'RANDOMTEXT';
}

编辑：这是我希望我的网站做的一个例子。

当用户点击浏览器上的后退按钮时，文本将变为以前的文字。所以，如果它显示＆＃34;嘿＆＃34;然后它显示＆＃34;再见＆＃34;，当用户点击浏览器的后退按钮，代码变为＆＃34;嘿＆＃34;

Answer 1

~~查看this jQuery plugin，您可以收听#hash更改事件。基本上，一旦你安装了这个插件，~~就可以有这样的东西：

window.onhashchange = function() { //when the hash changes (the '#' part)
    var loc = window.location + ""; //get the current location (from the address bar)
    var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
    if(curHash == "#home") { //if it's #home
        //change text to whatever you want
    }
    else if(curHash == "#nav") { //else if it's #nav
        //similarly, change text appropriately
    }
    else if(curHash == "#content") {
        //change text, too
    }
};

修改：实际上，onhashchange是现代浏览器的already supported in current versions。使用上面相同的代码，但没关注插件。

可能有一种更简单的方法可以做到这一点;但我希望这有帮助！

Answer 2

是的，你需要一个不同的方法，这里的问题是你的功能只有当你点击链接和javascript - 或者网络 - 而不是没有变通方法的状态时才会触发。因此，使用客户端路由库（如SammyJs）来处理浏览器历史记录。然后，将ChangeText函数绑定到更改地址而不是单击链接的事件。

因此链接点击会更改地址（使用sammyjs的客户端），然后响应更改地址的事件，如果您回击或刷新，您的应用程序状态仍然可以预先找到。

转到上一页时更改文本

2 个答案: