3

我目前正在构建一个网站，其中包含许多指向我网站不同部分的链接（也称为导航）。让我们将这些链接及其对应的页面称为link1、page1、link2、page2、link3、page3等。

他们的通用代码是这样的：

<a href="/page1.html">Link1</a>

<a href="/page2.html">Link2</a>

<a href="/page3.html">Link3</a>

我希望用户单击每个链接以移动到相应的网页，并且它按预期工作。问题是当用户与他们单击的链接位于同一页面时，我希望链接不执行任何操作（这意味着它只会重新加载页面）。让我通过一个例子来说明这一点：

当前使用：用户在page1上。用户点击link1。浏览器将重新加载page1。
预期用途：用户在page1上。用户点击link1。浏览器什么也不做。

TL;DR 本质上，我正在寻找一个 if 子句。我读过 HTML 中没有 if 子句，仅仅是因为它是一种标记语言，但是实现它的另一种方法是什么？谢谢你的帮助。

4

4 回答 4

4

在咀嚼 SO 之后，我发现不需要使用 JQuery 或 JS 的最佳答案是这个，由 Matt Crinklaw-Vogt 做出的回答：

添加 /#!。这将防止滚动到顶部，也将防止页面重新加载。代码：

<a href="/page1.html/#!">Link1</a>

原答案：

单击触发 JavaScript 的链接时，如何阻止网页滚动到顶部？

于 2012-10-29T10:52:46.673 回答
1

我不确定我是否喜欢它，但您可以使用空书签来执行此操作...

<a href="/page1.html#">Link1</a>

如果您不在 page1 上，它将加载 page1，但是一旦您到达那里，它就不会做任何事情。

于 2012-10-29T10:06:36.117 回答
0 
<a href="#">Link2</a>

或者

 <a onclick = "return false;">Link2</a>

这抵消了负载。

在页面加载时，您可以按如下方式使用 JS

<a href="/page1.html" id="link1">Link1</a>

JS：

document.getElementById("link1").setAttribute("href", "#");
于 2012-10-29T10:06:52.310 回答
0

您可以使用 javascript 将当前 url 与锚链接进行比较，如果它们相同，则阻止默认单击事件。使用 jquery：

var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
    if(urlRegExp.test(this.href.replace(/\/$/,''))) {
        $(this).click(function(event) {
            event.preventDefault();
        });
    }
});
于 2012-10-29T15:30:28.960 回答