Question

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

他们的一般代码是：

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

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

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

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

当前使用：用户在第1页。用户点击 link1 。浏览器将重新加载第1页 所需用途：用户在第1页。用户点击 link1 。浏览器什么都不做。

TL; DR基本上我正在搜索if子句。我已经读过HTML中没有if子句只是因为它是一种标记语言，但实现它的另一种方法是什么？谢谢你的帮助。

Answer 1

我在没有使用JQuery或JS之后找到的最佳答案就是这样，Matt Crinklaw-Vogt的回答：

添加/＃！这将阻止滚动到顶部，也将阻止页面重新加载。代码：

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

原始答案：

How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

Answer 2

我不确定我喜欢它，但你可以使用空书签来做到这一点......

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

如果你不在第1页，它将加载page1，但是一旦你在那里，它将不会做任何事情。

Answer 3

<a href="#">Link2</a>

OR

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

取消加载。

在页面加载时，您可以使用JS，如下所示

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

<强> JS ：

document.getElementById("link1").setAttribute("href", "#");

Answer 4

您可以使用javascript将当前网址与锚链接进行比较，如果它们相同，则阻止默认点击事件。使用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();
        });
    }
});

HTML链接在您链接到的页面上不执行任何操作

4 个答案: