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

Question

我有一个静态网站，其中包含经典菜单：家庭，服务，联系等链接。 我正在尝试做的是减少网站的大小。 因此，我没有为链接使用多个页面（例如home.html，services.html），而是尝试只保留一个页面，然后（点击发生时）动态更改内容。

html代码（示例）：

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

js code：

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

有趣的事情发生了。如果我点击链接，“旧文本”确实变成了“新文本”，但仅限于1秒！然后，它又回到'旧文本'！

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

1. 还有其他方法可以减少网站的大小，或者我的想法很好吗？ 或
2. 是否有解决方案，包括刷新网站并从链接调用js联结？

Answer 1

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

Answer 2

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

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

此外，您应该记住，javascript并不总是有效。例如，许多人出于安全原因禁用javascript或避免恼人的广告。因此，导航永远不应该依赖于JavaScript。至少，如果禁用了javascript，你应该有noscript部分与静态页面一起使用。 （但这会使页面更大。）