禁用的href标签

2020/10/07 06:41 · javascript ·  · 0评论

尽管该链接已禁用,但仍然可以单击。

<a href="/" disabled="disabled">123n</a>

如果禁用它,我可以使其不可单击吗?我是否必须使用JavaScript?

没有超链接的禁用属性。如果您不希望链接某些内容,则需要<a>完全删除该标签或删除其href属性。

借助CSS,您将禁用超链接。试试下面

a.disabled {
  pointer-events: none;
  cursor: default;
}
<a href="link.html" class="disabled">Link</a>

您可以使用:

<a href="/" onclick="return false;">123n</a>

您可以使用以下解决方案之一:

的HTML

<a>link</a>

的JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

的CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

尝试这个:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

<a>标签不具有disabled的属性,这只是为<input>S(和<select>S和<textarea>S)。

要“禁用”链接,可以删除其href属性,或添加返回false的单击处理程序。

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

您需要删除<a>标签才能摆脱这种情况。

或尝试使用:-

  <a href="/" onclick="return false;">123n</a>

提示1:使用CSS pointer-events: none;

提示2:使用JavaScript javascript:void(0)
(这是最佳做法)

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

提示1:使用Jquery $('selector').attr("disabled","disabled");

仅限CSS:从中删除链接href

.disable { 
    pointer-events: none; 
    cursor: default; 
}

让父母拥有pointer-events: none将禁用a-tag像这样的孩子(要求div覆盖a且宽度/高度不为0):

<div class="disabled">
   <a href="/"></a>
</div>

哪里:

.disabled {
    pointer-events: none;
}
$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

您可以在<a>标签上模拟Disabled属性

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

您可以使用此代码在运行时使用javascript禁用链接

$('。page-link')。css(“ pointer-events”,“ none”);

如果要摆脱指针,可以使用cursor使用CSS进行操作

就我而言,

<a href="/" onClick={e => e.preventDefault()}>

我有一个:

<a href="#">This is a disabled tag.</a>

希望它能对您有所帮助;)

我们无法直接将其禁用,但是我们可以执行以下操作

  1. 添加type="button"
  2. 删除href=""属性。
  3. 添加disabled属性,以便通过更改路线显示它已禁用,并且它变暗了。

以下是一个例子

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

我能够使用ng-href三元运算获得所需的结果

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

哪里

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

正确使用按钮和链接。

•按钮可激活网页上的脚本功能(对话框,展开/折叠区域)。

•链接将您带到另一个位置,即另一个页面或同一页面上的另一个位置。

如果遵循这些规则,则在需要禁用链接时不会有任何情况。即使您使链接看起来在视觉上被禁用并且在单击时空白

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

您不会考虑可访问性,并且屏幕阅读器会将其视为链接,而视障人士会一直想知道为什么链接不起作用。

如果您使用的是WordPress,我创建了一个插件,可以执行此操作以及更多操作,而无需知道如何编写任何代码。您需要做的就是添加要禁用的链接的选择器,然后选择“在新选项卡中禁用使用此选择器的所有链接”。从出现的下拉菜单中,然后单击更新。

单击此处查看演示此操作的GIF

您可以从WordPress.org插件存储库中获得免费版本以进行试用。

以下是禁用a标签的多种方法:

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

由于锚标记没有禁用的属性。如果要停止jQuery函数中的锚标记行为,则可以在函数开头使用以下行:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault()

我看到这里已经发布了大量答案,但是我认为还没有任何明确的方法可以将已经提到的方法与我发现的方法结合起来。这是为了使链接既显示为禁用状态,又不将用户重定向到另一个页面。

此答案假定您正在使用jquerybootstrap,并href在禁用时使用另一个属性临时存储该属性。

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }
a.disabled {
  cursor: default;
}

最佳答案永远是最简单的。无需任何编码。

如果(a)定位标记没有href属性,则它只是超链接的占位符。所有浏览器都支持!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

鼠标悬停href标记中的所有内容都将显示在浏览器窗口的左下方。

我个人认为向用户显示javascript:void(0)之类的东西很可怕。

取而代之的是,取消href,使用jQuery /其他方法处理魔术并添加样式规则(如果您仍然需要它看起来像一个链接):

a {
    cursor:pointer;
}

有一种简单而干净的方法,如下所示:

<a href="/shopcart/">

  <button class="btn" disabled> Make an Order </button>

</a>

残疾的一个属性,<button>默认情况下不会让点击经历<button>元素最多<a>的元素。因此<a>element甚至不知道发生了一些点击。通过在上添加/删除禁用属性来进行操作<button>

试试这个

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

您可以通过返回false来禁用锚标记。在我的情况下,我为Jquery手风琴使用了angular和ng-disabled,我需要禁用这些部分。

因此,我创建了一个小js代码段来解决此问题。

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

如果您只是想暂时禁用该链接,但将href留在那里以便以后启用(这是我想做的),我发现所有浏览器都使用第一个href。因此,我能够做到:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

适合我的变体:

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>
本文地址:http://javascript.askforanswer.com/jinyongdehrefbiaoqian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!