链接标签调用js函数不起作用

Question

我有一个带有经典菜单的静态站点，例如：主页、服务、联系方式等链接。 我正在尝试减小网站的大小。 因此，我尝试只保留一个页面，然后（当点击发生时）动态更改内容，而不是使用多个页面作为链接（如 home.html、services.html）。

html代码（示例）：

<a href="javascript:this.location.reload()" onClick="ContactClick();">contact</a>
<h1>old text</h1>

js代码：

function ContactClick() {
    $('h1').html('new text to change, but it doesnt work, yay!');   
}

发生了一些有趣的事情。如果我点击链接，“旧文本”确实会变成“新文本”，但仅持续 1 秒钟！然后，它立即变回“旧文本”！

我试过这样调用：<a href="javascript:ContactClick();">，它工作得很好，但是当点击事件发生时我仍然需要刷新页面（我在网站上有一些变色的东西，哈哈）。

1. 还有其他方法可以减小网站的大小，还是我的想法很好？ 或
2. 有没有包括刷新站点和从链接调用js junction的解决方案？

Answer 1

也许您不应该在href 中重新加载页面。

Answer 2

您不需要减小网站的大小。仅包含文本的静态页面很小，即使在第一次加载时也只需几分之一秒。之后，它们将被缓存并立即加载。

另一方面，如果将所有文本放在一个页面中，再加上一些 javascript 代码，结果不会比静态页面小，而是大。

此外，您应该记住，javascript 并不总是有效。例如，许多人出于安全原因或为了避免刺激性广告而禁用 javascript。因此，导航永远不应该依赖于javascript。至少，在禁用 javascript 的情况下，您应该有适用于静态页面的 noscript 部分。 （但这会使页面更大。）