如何禁用默认<a> behaviour of &#34;href&#34; attribute?</a>

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＆amp; CSS？ 如果没有，那么使用Javascript，jQuery做最简单的方法是什么？

Answer 1

你可以添加

onclick="return false"

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

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