如何禁用“href”属性的默认 <a> 行为？答案

【问题标题】：How to disable default <a> behaviour of "href" attribute?如何禁用“href”属性的默认 <a> 行为？
【发布时间】：2014-06-12 22:44:37
【问题描述】：

我有一个像这样的简单侧边栏：

<div class="sidebar">
   <ul class="nav">
      <li class="Page1"><a href="Page1.html">Page1</a></li>
      <li class="Page2"><a href="Page2.html">Page2</a></li>
      <li class="Page3"><a href="Page3.html">Page3</a></li>
   </ul>
</div>

此代码存在于每个页面中：page1.html、page2.html、page3.html。

在 Page1.html 上，我希望 Page1 不可点击。
在 Page2.html 上，我希望 Page2 不可点击。
在 Page3.html 上，我希望 Page3 不可点击。

是否可以在没有 Javascript 的情况下做到这一点，即纯 HTML 和 CSS ？如果没有，使用 Javascript、jQuery 最简单的方法是什么？

【问题讨论】：

如果 PHP 是一个选项，这应该不是什么大问题。
您是否正在使用服务器端脚本创建动态页面？
正确的方法是使用 CSS 使当前页面看起来像不可点击。因为您在每个页面中重复 html，您只需要添加另一个类来指示当前页面，并为此编写一个 CSS。说得通？几乎每个网站都这样做。
使用 CSS 或 Javascript 禁用链接并不是一个好方法，因为它没有考虑到可访问性问题。请参阅本页列表中的第 10 号：The Ten Most Violated Homepage Design Guidelines。如果你可以添加一个改变样式的 CSS 类，为什么不直接删除 <a> 标签呢？如果您可以使用 Javascript 添加 onclick 事件，为什么不直接删除 <a> 标记？如果您使用服务器端语言动态创建页面，请不要将<a> 标记放在首位。如果不是链接，请不要将其设为链接。

标签： javascript jquery html css anchor

【解决方案1】：

你可以添加

onclick="return false"

在您要禁用的 <a> 标记上。

【讨论】：

是的，但这没有描述如何自动化这个过程（让 JavaScript 确定要禁用的正确链接，然后自动禁用它）。

【解决方案2】：

我实际上推荐 PHP，因为它避免了可能的可用性/可访问性问题。

另一个注意事项：无论如何我都不会打扰这样做。在我的网站上，我保留所有可用链接 - 标题告诉用户她在哪里，因此禁用链接只会造成麻烦。

不，你需要 JavaScript，但你不需要 jQuery。

首先，选择元素：

navlinks = document.querySelectorAll('nav a');

您需要将NodeList 转换为Array。使用这个功能：

function array(a) {
  var r = []; for (var i = 0; i < a.length; i++)
    r.push(a[i]);
  return r;
}

navlinks = array(navlinks);

然后...调用forEach 并检查正确的链接，禁用它：

navlinks.forEach(function(node) {
  if (node.href == location)
    node.addEventListener('click', function(e) { e.preventDefault(); }, false);
});

【讨论】：

【解决方案3】：

如果你想纯粹使用 HTML 和 CSS，你必须为每个页面生成一个自定义的侧边栏。

不过，如果你不介意使用 PHP，那应该不是什么大问题。

【讨论】：

正确。如果文本不应该是链接，那么它不应该在标签中

【解决方案4】：

最好的方法是在服务器端。在看起来像这样的伪代码中

links = [
  "Page1" : "page1.html"
  "Page2" : "page2.html"
  "Page3" : "page3.html"
]

html = ""

for linkTitle, linkUrl of links

  if current_url is linkUrl
    html += "<li>#{linkTitle}</li>"
  else
    html += "<li><a href='#{linkUrl}'>#{linkTitle}</a></li>"

return "<ul>" + html + "</ul>"

【讨论】：