如何禁用默认的 “href”的行为属性？

Question

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

<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 和纯 HTML）的情况下做到这一点？ CSS？ 如果没有，使用 Javascript、jQuery 最简单的方法是什么？

Answer 1

您可以添加

onclick="return false"

要禁用的 标记。

Answer 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);
});

Answer 3

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

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

Answer 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>"