如何禁用默认的“href”属性的行为？(How to disable default beh

我有一个简单的工具条是这样的：

<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，我想第1页不要点击。
在Page2.html，我想第2页不点击。
在Page3.html，我想第3页不要点击。

是有可能做到这一点没有JavaScript，即纯HTML和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>"

文章来源: How to disable default behaviour of “href” attribute?