使用 Javascript 在运行时禁用<一个 href>

Disable <a href> in runtime using Javascript

本文关键字：href 一个 Javascript 运行时 使用      更新时间：2023-09-26

Using Bootstrap

  <ul class="nav nav-pills nav-stacked col-sm-2 hidden" id="menu">
                <li role="presentation" id="LiNewsFeed"><a href="javascript:GetNewsFeed();">News Feed</a></li>
                <li role="presentation" id="LiStatusUpdate"><a href="javascript:StatusUpdate();">Update Status</a></li>
                <li role="presentation" id="LiWriteWall"><a href="javascript:WriteOnWall();">Post On Wall</a></li> 
                <li role="presentation" id="LiNotifications"><a href="javascript:GetNotifications();">Notifications</a></li>
                <li role="presentation" id="LiLogOut"><a href="javascript:LogOut();">Logout</a></li> 
  </ul>

在Javascript中，我禁用了一些<li>，如下所示：

 $('#LiNewsFeed').addClass('disabled');

列表中的项目实际上看起来已禁用，当我单击它时，它实际上调用了javascript函数，因此，我需要的是禁用<a href>而不仅仅是<li>

我尝试在$(document).ready后添加这个：

$(".nav li.disabled a").click(function () {
                return false;
});

但它并没有真正做任何事情。

我需要的是在我的 Js 代码中禁用<li>后直接禁用<a href>，而不是依赖点击事件......

似乎没有办法禁用<a href>，所以我需要一种方法来解决它

任何帮助将不胜感激。

使用以下

代码。 检查工作示例 JSFIDDLE

$(".nav li.disabled a").each(function(){
     $(this).attr('href','javascript:void(0);');
});

当您在 javascript（运行时）中禁用LI时，您应该使用 .on 在禁用的链接上绑定事件：

$(".nav").on('click', 'li.disabled a', function () {
    return false;
});

我会检查每个链接单击是否为父级禁用了类。

$('.nav li a').click(function () {
    if($(this).parent('li').hasClass('disabled')) {
        return false;
    }
    return true;
});

编辑，根据OP的更多信息，我会提出以下建议：

$('.nav li a').each(function() {
    var $this = $(this);
    // store reference of 'href' attr in case link is re-enabled
    $this.data('href', $this.attr('href'));
    if ($this.parent('li').hasClass('disabled')) {
        // remove href attribute disabling click
        $this.removeAttr('href');
    } else {
        // restore href
        $this.attr('href', this.data('href'));
    }
});

此代码应在添加/删除 li 元素上的禁用类后运行。

编辑 2 - 与其从<a>链接的 href 调用函数，不如执行以下操作：

var events = {
    '#LiNewsFeed': 'GetNewsFeed',
    '#LiStatusUpdate': 'StatusUpdate'
    '#LiWriteWall': 'WriteOnWall',
    '#LiNotifications': 'GetNotifications',
    '#LiLogOut': 'LogOut'
};
for (var selector in events) {
    if (events.hasOwnProperty(selector)) {
        try {
            $(selector).click(function () {
                // assuming function is global
                if (typeof window[events[selector]] === 'function') {
                    // call function
                    window[events[selector]]();
                }
                // this is needed if the a element still has a href attr
                return false;
            });
        } catch (e) {
            console.log('Invalid Selector');
        }
    }
}

这样你可以控制函数的调用，并检查是否应该在不改变元素的情况下调用它，也许会坚持一个

if (!$(this).parent('li').hasClass('disabled')) {
    ...
}

围绕函数调用。

你能将 a 转换为跨度吗？

（代码未测试）

$(".nav li.disabled a").replaceWith(function() { return "<span>" + this.innerHTML + "</span>"; });
相关文章：