当您在它们链接的页面上时不执行任何操作的 HTML 链接答案

【问题标题】：HTML Links that do nothing when you are on the page they link to当您在它们链接的页面上时不执行任何操作的 HTML 链接
【发布时间】：2012-10-29 10:04:03
【问题描述】：

我目前正在构建一个网站，其中包含许多指向我网站不同部分的链接（也称为导航）。让我们将这些链接及其对应的页面称为 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 子句，仅仅是因为它是一种标记语言，但是实现它的另一种方法是什么？感谢您的帮助。

【问题讨论】：

我会在 page1 加载时使用 javascript 禁用 link1。
您可以使用 JavaScript 来执行此操作（通过阻止默认操作离开）或者 - 如果您使用服务器端脚本语言 - 您可以检测 URL 而不是将链接设为链接 (例如，只是一个
标签）。不过我也不会这样做——让浏览器按照它在其他网站上的工作方式来处理它；以这种方式使您的网站成为例外只会使可用性变得更糟。
为什么当前页面链接必须是 LINK？
@Wezly 正如我在之前的评论中所说，我使用的导航代码是通用的，每次更改都会影响所有页面上的所有导航链接。假设我稍后必须添加/删除/编辑导航链接，我将不得不编辑每个页面中的所有导航。
如果你的导航代码是通用的，我假设你已经包含了它——也许是 php？ <?include('navigation.php');?> - 如果是这样，那么只需使用 php 检测当前页面 <?$_SERVER['PHP_SELF']?> 并相应地生成导航。

标签： html hyperlink webpage

【解决方案1】：

在咀嚼 SO 之后，我发现不需要使用 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?

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这会将视图重定向到顶部，我不希望这种情况发生。
我的首要建议是为此转向服务器端，甚至不要将其设为链接。如果什么都没有发生，用户将再次单击，直到他们确定他们已经在页面上。因此，最好的用户体验是不将其设为链接并突出显示它以显示它们已经在页面上。如果你给我一个你可以使用的服务器端语言，我会给你一个例子。

【解决方案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", "#");

【讨论】：

这可行，但它会将页面移动到顶部。有什么办法可以取消吗？
@Aposperite 您可以取消该事件。 .您的所有链接都可以移动到 onclick 事件，而不是 href。
假设你不能使用JS是有原因的，还有其他方法吗？我的意思是取消滚动到页面顶部的效果。
如果这都是静态的，那么您可以将当前页面链接设为 <p> 元素并将其样式设置为相同（或突出显示它以显示当前页面）。
@Aposperite 如果页面由服务器端脚本提供，请使用它来修改链接。否则，JavaScript 是我能想到的唯一方法。

【解决方案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();
        });
    }
});

【讨论】：