2

我制作了一个网站，在菜单栏中选择一个项目后，屏幕会移动到页面上的特定位置。然后我做了一个函数，其中文本在两个位置发生变化，“titletext”和“infotext”。例子：

<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';
}

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

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

4

2 回答 2

0

看看这个 jQuery 插件，它允许您监听#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已经支持。使用上面相同的代码，但不要介意插件。

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

于 2012-10-07T19:06:18.087 回答
0

是的，您需要一种不同的方法，这里的问题是，您的函数仅在您单击链接时触发，而 javascript - 或者网络更确切地说 - 在没有变通方法的情况下不会保持状态。因此，请使用 SammyJs 等客户端路由库来处理浏览器历史记录。然后，您将 ChangeText 函数绑定到更改地址的事件，而不是单击链接。

因此，点击链接会更改地址（客户端使用 sammyjs），然后响应更改地址的事件，如果您回击或刷新，您的应用程序状态将保持保留。

于 2012-10-07T19:08:26.277 回答