如何禁用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>';

当您不希望用户点击时重定向时，请尝试此操作

<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与往常一样不会允许它:)我无论如何都会发布此消息，因为我认为其中包含有用的信息，并且某些项目使用的是已知的浏览器，例如在移动设备上使用网络视图时。

如果您只想停用一个链接（我仅意识到那是问题），则我将使用基于该条件手动设置当前页面的URL的功能。（例如您接受的解决方案）

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

您可以简单地给它一个空哈希：

anchor.href = "#";

或如果还不够“禁用”，请使用事件处理程序：

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

尝试使用jQuery：

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

anchor.href = null;

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

我发现这种方式更容易实现。而且它的优点是您可以使用js。不在您的html内，而是在另一个文件中。我认为没有绑定。这两个事件仍处于活动状态。不确定。但从某种意义上讲，您只需要此事件

MDN建议element.removeAttribute(attrName);您在要禁用该属性时，将其设置为null（或其他值）。在这种情况下element.removeAttribute("href");

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/removeAttribute

禁用链接的最简单方法就是不显示它。每当您要测试是否满足条件时都可以运行此功能，以隐藏“上一个”按钮（替换if (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()在需要检查条件是否发生变化时运行。

请改用span和javascript onclick。如果您有链接和“＃” href，则某些浏览器会“跳转”。

这也是可能的：

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

链接不会随处可见，您的函数将被执行。

我也有类似的需求，但我的动机是防止双击该链接。我用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>

因此，上述解决方案使该链接不起作用，但不要使该链接不再有效（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;
                }
            }
        }
    }
}

这遍历了链接列表，找到了指向当前页面的链接（n_root3可能是本地的东西，但我想document一定有类似的东西），然后用链接文本内容替换了该链接。

高温超导

谢谢你们...

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

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

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

这将隐藏链接。通过在onclick中调用此函数，可以使用按钮或图像使该div现在可见：

<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="#"; 

其中之一必须确保一定哈哈

禁用链接的另一种方法

element.removeAttribute('href');

没有href的定位标记会作为已禁用/纯文本反应

<a> w/o href </a>

代替 <a href="#"> with href </a>

参见jsFiddel

希望这是幸福的。

除了void，您还可以使用：

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

0）您最好记住，如果您有链接和“＃” href，则某些浏览器会“跳转”。因此最好的方法是自定义JavaScript

1）如果您在自定义JavaScript之后，则为：

<a href="#" onclick="DoSomething(); return false;">Link</a>

“ return false”会阻止实际跟踪链接。

2）您可以考虑避免使用以下内容

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

要么

  <a href="javascript:;" onclick="DoSomething();">Link</a>

因为javascript伪协议可以使页面在某些浏览器中进入等待状态，这可能会带来意想不到的后果。IE6以它而闻名。但是，如果您不关心IE6，并且正在测试所有内容，那么它可能是一个很好的解决方案。

3）如果您已经拥有jQuery并且bootstrap在您的项目中，可以像下面这样研究使用它们：

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

哪里的.disabled类来自引导程序。

Qupte表单引导站点（此处）

链接功能警告

.disableed类用于pointer-events: none尝试禁用s的链接功能，但是CSS属性尚未标准化。此外，即使在支持指针事件的浏览器中：无，键盘导航也不受影响，这意味着有经验的键盘用户和辅助技术用户仍将能够激活这些链接。为安全起见，请tabindex="-1"在这些链接上添加一个属性（以防止它们获得键盘焦点）并用于custom JavaScript禁用其功能。

并custom JavaScript显示在第1节中

下面的代码禁用链接：

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

另一个非常简单的解决方案是：

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

第一个解决方案是有效的。