HTML链接当你在其对应页面上时不起作用

Question

我目前正在构建一个包含指向不同部分（也称为导航）的链接的网站。让我们将这些链接及其对应的页面称为链接1，页面1，链接2，页面2，链接3，页面3等。

它们的一般代码如下：

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

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

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

我希望用户点击每个链接可跳转到对应的网页，并按预期工作。问题在于当用户所在页面与所点击链接相同时（即只会重新加载页面），我希望链接不做任何操作。以下示例可以更清晰地说明该问题：

当前使用方式：用户在page1上，点击link1，浏览器将重新加载page1。
期望使用方式：用户在page1上，点击link1，浏览器将不做任何操作。

简而言之，我正在寻找一个if子句。我已经了解到HTML中没有if子句，因为它是一种标记语言，但是否有其他实现此功能的方法？感谢您的帮助。

- Theocharis K.

---

当页面1加载时，我会使用JavaScript禁用link1。 - keyser

你可以使用JavaScript来实现这个功能（通过阻止默认操作以避免导航离开），或者 - 如果你正在使用服务器端脚本语言 - 你可以检测URL并将链接设置为非链接（例如，只是一个<p>标签）。但我不会这样做 - 让浏览器按照其他网站的方式处理它，这样做只会使可用性变得更差。 - Iain Collins

为什么当前页面链接必须是一个链接？ - Wez

@Wezly，正如我在之前的评论中所说，我使用的导航代码是通用的，每一次更改都会影响到所有页面上的所有导航链接。假设我以后需要添加/删除/编辑一个导航链接，我将不得不编辑每个页面中的所有导航。 - Theocharis K.

如果您的导航代码是通用的，我假设您会以某种方式包含它 - 也许是用 PHP？<?include('navigation.php');?>- 如果是这样，那么只需使用PHP检测当前页面<?$_SERVER['PHP_SELF']?>，并相应地生成导航即可。 - Wez

Answer 1

我在阅读Stack Overflow的内容后，找到了一个无需使用JQuery或JS的最佳答案，这个答案是由Matt Crinklaw-Vogt提供的：

添加一个/#!。这将防止页面滚动到顶部，并且还将防止页面重新加载。代码如下：

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

原始回答：

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

当您点击一个链接并触发JavaScript时，页面将自动滚动到顶部是因为默认情况下浏览器会将链接的href属性设置为“#”，这会导致页面跳转至文档的顶部。要解决这个问题，您可以在JavaScript事件处理程序中添加以下代码：

``` event.preventDefault(); ```

这将阻止默认行为（即页面滚动到顶部）并允许您执行其他操作。

- Theocharis K.

Answer 2

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

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

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

- Fenton

---

这将会重定向视图到顶部，而我不希望发生这种情况。 - Theocharis K.

我的顶级提示是将其转向服务器端，甚至不要将其制作为链接。如果什么都不发生，用户会一直点击，直到他们意识到他们已经在页面上了。因此，最好的用户体验是不要将其制作为链接，并将其突出显示以表明他们已经在页面上了。如果您给我一个服务器端语言，我会给您一个示例。 - Fenton

Answer 3

<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", "#");

- Anirudh Ramanathan

---

这个可以运行，但它会将页面移动到顶部。有没有办法取消这个操作？ - Theocharis K.

@Aposperite 你可以取消掉那个事件。<a onclick = "javascript:return false;"> 所有的链接都可以移到onclick事件中，而不是href。 - Anirudh Ramanathan

假设由于某些原因您不能使用JS，还有其他方法可以做到吗？我的意思是取消滚动到页面顶部的效果。 - Theocharis K.

@Wezly，你可能认为我知道用户在哪个页面并更改此页面的超链接。让我更清楚一些，我使用的导航代码是通用的，该代码在页面1和页面2上必须相同。也许我没有理解你的意思... - Theocharis K.

如果页面是由服务器端脚本提供的，请使用该脚本来修改链接。否则，我只能想到使用JavaScript来完成此操作。 - Anirudh Ramanathan

Answer 4

您可以使用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();
        });
    }
});

- Aaron Fowler