如何禁用JavaScript中的href链接?

我有一个标签<a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a> ,在某些情况下,我希望这个标签完全禁用。

代码从评论(这是如何生成链接)

 if (n_index != n_pages) a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; else a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; a = a+'</ul></div>'; 

当你不想让用户点击redirect时试试这个

 <a href="javascript: void(0)">I am a useless link</a> 

您可以使用此样式类停用页面中的所有链接:

 a { pointer-events:none; } 

现在当然诀窍是停用链接,只有当你需要,这是如何做到这一点:

使用一个空的A类,就像这样:

 a {} 

那么当你想停用链接时,请执行以下操作:

  GetStyleClass('a').pointerEvents = "none" function GetStyleClass(className) { for (var i=0; i< document.styleSheets.length; i++) { var styleSheet = document.styleSheets[i] var rules = styleSheet.cssRules || styleSheet.rules for (var j=0; j<rules.length; j++) { var rule = rules[j] if (rule.selectorText === className) { return(rule.style) } } } return 0 } 

注意:在某些浏览器中,CSS规则名称被转换为小写,这段代码区分大小写,所以最好使用小写的类名

重新激活链接:

 GetStyleClass('a').pointerEvents = "" 

有关浏览器兼容性的信息,请查看http://caniuse.com/pointer-events

我认为这是做到这一点的最好方法,但可悲的是,IE总是不会允许的:)我发布这个无论如何,因为我认为这包含的信息可以是有用的,因为一些项目使用知道的浏览器,就像在移动设备上使用networking视图一样。

如果你只是想停用一个链接(我只知道这是问题),我会使用一个函数,手动设置当前页面的url,或不,基于这种情况。 (就像你接受的解决scheme一样)

这个问题比我想象的要容易得多:)

你可以简单地给它一个空的散列:

 anchor.href = "#"; 

或者如果这不够“禁用”,请使用事件处理程序:

 anchor.href = "javascript:void(0)"; 
 anchor.href = null; 

试试这个使用jQuery:

 $(function () { $('a.something').on("click", function (e) { e.preventDefault(); }); }); 

禁用链接最简单的方法就是不显示它。 运行这个函数,只要你想testing你的条件是否符合隐藏Previousbutton(用你的条件replaceif (true) ):

 var testHideNav = function() { var aTags = document.getElementsByTagName('a'), atl = aTags.length, i; for (i = 0; i < atl; i++) { if (aTags[i].innerText == "Previous") { if (true) { // your condition to disable previous aTags[i].style.visibility = "hidden"; } else { aTags[i].style.visibility = "visible"; } } else if (aTags[i].innerText == "Next") { if (false) { // your condition to disable next aTags[i].style.visibility = "hidden"; } else { aTags[i].style.visibility = "visible"; } } } }; 

然后运行testHideNav()只要你需要做检查,如果你的条件已经改变。

 (function ($) { $( window ).load(function() { $('.navbar a').unbind('click'); $('.navbar a').click(function () { //DO SOMETHING return false; }); }); })(jQuery); 

我觉得这个方法更容易实现。 它有你的优势。 不在你的html里面,而是在一个不同的文件中。 我觉得没有解脱。 这两件事仍然活跃。 不确定。 但是从某种意义上说,你只需要这个事件

改用span和javascript onclick。 如果你有一个链接和“#”href的一些浏览器“跳”。

这也是可能的:

 <a href="javascript:void(0)" onclick="myfunction()"> 

链接没有去任何地方,你的function将被执行。

因此,上述解决scheme使链接不起作用,但不要使其可见(AFAICT)链接不再有效。 我有一个情况,我有一系列的页面,并希望禁用(显而易见,它被禁用)指向当前页面的链接。

所以:

 window.onload = function() { var topics = document.getElementsByClassName("topics"); for (var i = topics.length-1; i > -1; i-- ) { for (var j = topics[i].childNodes.length-1; j > -1; j--) { if (topics[i].childNodes[j].nodeType == 1) { if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) { topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML; } } } } } 

这遍历链接列表,find指向当前页面的那个(n_root3可能是本地的东西,但我想象document必须有类似的东西),并用链接文本内容replace链接。

HTH

我有类似的需求,但我的动机是防止链接被双击。 我使用jQuery完成了它:

 $(document).ready(function() { $("#myLink").on('click', doSubmit); }); var doSubmit = function() { $("#myLink").off('click'); // do things here }; 

HTML看起来像这样:

 <a href='javascript: void(0);' id="myLink">click here</a> 

MDNbuild议使用element.removeAttribute(attrName); 当你想禁用它的时候,将该属性设置为null(或其他值)。 在这种情况下,它将是element.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

安装jquery插件,并使用它

http://plugins.jquery.com/project/jqueryenabledisable

它允许您禁用/启用页面中的任何字段。

如果你想在某些情况下打开一个页面,写一个Java脚本函数并从href调用它。 如果条件满足你打开页面,否则什么都不做。

代码如下所示:

 <a href="javascript: openPage()" >Click here</a> and function: function openPage() { if(some conditon) opener.document.location = "http://www.google.com"; } } 

您也可以将链接放在div中,并将Style属性的display属性设置为none。 这将隐藏div。 例如,

 <div id="divid" style="display:none"> <a href="Hiding Link" /> </div> 

这将隐藏链接。 使用button或图像来使这个div可见,现在通过在onclick中调用该函数为:

 <a href="Visible Link" onclick="showDiv()"> and write the js code as: function showDiv(){ document.getElememtById("divid").style.display="block"; } 

你也可以把一个id标签放到html标签中,这样就可以了

 <a id="myATag" href="whatever"></a> 

并通过使用您的JavaScript获取此ID

 document.getElementById("myATag").value="#"; 

其中一个必须工作肯定哈哈

谢谢你们…

我的问题通过以下代码解决:

 <a href="javascript:void(0)"> >>> </a> 

另一种禁用链接的方法

 element.removeAttribute('href'); 

没有href的锚点标签会作为禁用/纯文本的反应

 <a> w/o href </a> 

而不是<a href="#"> with href </a>

见jsFiddel

希望这是hellful。

你也可以使用:

 <a href="javascript:;">this link is disabled</a> 

这是我如何禁用点击

 $('.one-click').on("click", function (e) { $( this ).addClass('disabled'); }); 

其中.disabled类来自引导。

Qupte form bootstrap网站( 这里 )

链接function警告

.disabled类使用pointer-events:none来禁用s的链接function,但CSS属性尚未标准化。 另外,即使在支持指针事件的浏览器中:没有,键盘导航仍然不受影响,这意味着有远见的键盘用户和辅助技术用户仍然能够激活这些链接。 为了安全起见,请在这些链接上添加一个tabindex =“ – 1”属性(以防止它们接收键盘焦点),并使用自定义JavaScript来禁用它们的function。

我正在寻找简单的东西,所以我把上面的答案(提示: javascript: void(0); )合并到一个JQuery .attr() ,如下所示:

 $("a").attr("href", "javascript: void(0);" ); 

下面的代码禁用链接:

 <a href="javascript: void(0)">test disabled link</a> 

另一个非常简单的解决scheme是

 <a href="#">test disabled link</a> 

第一个解决scheme是高效