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

我有一个简单的工具条是这样的：page1.html，page2.html，page3.html：如何禁用“href”属性的默认<a>行为？

<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上，我希望Page1不可点击。
在Page2.html上，我希望Page2不可点击。
在Page3.html上，我希望Page3不可点击。

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

来源

2010-07-04 Misha Moroshko

如果PHP是一个选项，这应该不是什么大问题。 – phimuemue 2010-07-04 11:16:16

您是否正在使用服务器端脚本创建动态页面？ – Mike 2010-07-04 11:17:02

正确的做法是通过使用CSS来使当前页面看起来不可点击。因为你在每一页重复html，所以你只需要添加另一个类来表示当前页面，并为此写一个CSS。说得通？几乎每个网站都这样做。 – tathagata 2010-07-04 11:27:28

您可以在您要禁用<a>标签添加

onclick="return false"

。

来源

2010-07-04 11:15:53

确实如此，但是这并没有描述如何自动执行此过程（让JavaScript确定禁用的正确链接，然后自动禁用它）。 – 2010-07-04 11:25:59

请勿使用JavaScript来解决非JavaScript问题。 – Gareth 2010-07-04 11:52:03

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

但是，如果你不介意使用PHP，那应该是一个很大的问题。

来源

2010-07-04 11:17:45 phimuemue

正确。如果文本不应该是链接，那么它不应该在标记中 – Gareth 2010-07-04 11:53:03

我实际上推荐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); 
});

来源

2010-07-04 11:18:59

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

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

来源

2014-06-12 14:44:37 fet

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

回答

相关问题