Thẻ bị vô hiệu hóa

Mặc dù liên kết đó bị vô hiệu hóa, nó vẫn có thể nhấp được.

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

Tôi có thể làm cho nó không thể nhấp nếu nó bị vô hiệu hóa? Tôi có nên sử dụng JavaScript nhất thiết?

Không có thuộc tính bị vô hiệu hóa cho các siêu liên kết. Nếu bạn không muốn một cái gì đó được liên kết thì bạn sẽ cần phải xóa <a>hoàn toàn thẻ hoặc xóa hrefthuộc tính của nó .

Với sự giúp đỡ của css, bạn sẽ vô hiệu hóa siêu liên kết. Hãy thử dưới đây

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

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

Bạn có thể dùng:

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

Bạn có thể sử dụng một trong những giải pháp sau:

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>

Thử cái này:

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

Các <a>thẻ không có một disabledthuộc tính, đó là chỉ dành riêng cho <input>s (và <select>s và<textarea> s).

Để "vô hiệu hóa" một liên kết, bạn có thể xóa hrefthuộc tính của nó hoặc thêm một trình xử lý nhấp chuột trả về sai.

Bạn cần phải xóa <a>thẻ để thoát khỏi điều này.

hoặc thử sử dụng: -

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

HTML:

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

CSS:

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

Mẹo 1: Sử dụng CSS pointer-events: none;

Mẹo 2: Sử dụng JavaScript javascript:void(0) (Đây là cách thực hành tốt nhất)

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

Mẹo 1: Sử dụng Jquery $('selector').attr("disabled","disabled");

Chỉ CSS: điều này loại bỏ liên kết từ href.

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

Để cha mẹ có pointer-events: nonethể vô hiệu hóa đứa trẻ a-tagnhư thế này (yêu cầu div bao gồm a và không 0 chiều rộng / chiều cao):

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

Ở đâu:

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

bạn có thể vô hiệu hóa liên kết bằng cách sử dụng javascript trong thời gian chạy bằng cách sử dụng mã này

$ ('. page-link'). css ("con trỏ sự kiện", "không");

Nếu bạn muốn thoát khỏi con trỏ, bạn có thể làm điều này với css bằng con trỏ .

Bạn có thể mô phỏng thuộc tính bị vô hiệu hóa trên <a>thẻ.

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

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

Trong trường hợp của tôi, tôi sử dụng

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

Tôi có một:

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

Hy vọng nó sẽ giúp bạn;)

Chúng tôi không thể vô hiệu hóa nó trực tiếp nhưng chúng tôi có thể làm như sau

1. thêm vào type="button" .
2. gỡ bỏ href="" thuộc tính.
3. thêm disabledthuộc tính để nó hiển thị rằng nó bị vô hiệu hóa bằng cách thay đổi trình duyệt và nó bị mờ đi.

sau đây là một ví dụ

<?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    
}
?>

Tôi đã có thể đạt được kết quả mong muốn bằng cách sử dụng thao tác ng-href ternary

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

Ở đâu

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

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

Sử dụng các nút và liên kết chính xác.

• Các nút kích hoạt chức năng kịch bản trên một trang web (hộp thoại, mở rộng / thu gọn vùng).

• Liên kết đưa bạn đến một vị trí khác, đến một trang khác hoặc vị trí khác trên cùng một trang.

Nếu bạn tuân theo các quy tắc này, sẽ không có bất kỳ kịch bản nào khi bạn cần tắt liên kết. Ngay cả khi bạn tạo một liên kết trông bị vô hiệu hóa và onclick trống

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

Bạn sẽ không xem xét khả năng truy cập và trình đọc màn hình sẽ đọc nó dưới dạng liên kết và những người khiếm thị sẽ tiếp tục tự hỏi tại sao liên kết không hoạt động.

Nếu bạn đang sử dụng WordPress, tôi đã tạo một plugin có thể làm điều này & hơn thế nữa mà không cần biết cách mã hóa bất cứ điều gì. Tất cả những gì bạn cần làm là thêm bộ chọn của (các) liên kết mà bạn muốn tắt và sau đó chọn "Tắt tất cả các liên kết với bộ chọn này trong một tab mới." từ menu thả xuống xuất hiện và nhấp vào cập nhật.

Nhấn vào đây để xem một gif chứng minh điều này

Bạn có thể lấy phiên bản miễn phí từ kho lưu trữ Plugin WordPress.org để dùng thử.

Dưới đây là nhiều cách khác nhau để vô hiệu hóa thẻ:

<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

Vì không có thuộc tính bị vô hiệu hóa cho thẻ neo. Nếu bạn muốn dừng hành vi thẻ neo bên trong hàm jQuery, bạn có thể sử dụng dòng dưới đây khi bắt đầu hàm:

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

event.preventDefault ()

Tôi thấy đã có rất nhiều câu trả lời được đăng ở đây, nhưng tôi không nghĩ có câu trả lời rõ ràng nào kết hợp các cách tiếp cận đã được đề cập vào phương pháp mà tôi đã tìm thấy để làm việc. Điều này là để làm cho cả hai liên kết dường như bị vô hiệu hóa, và cũng không chuyển hướng người dùng đến một trang khác.

Câu trả lời này giả định rằng bạn đang sử dụng jquery và bootstrap và sử dụng một thuộc tính khác để tạm thời lưu trữ hreftài sản trong khi bị vô hiệu hóa.

//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;
}

Mọi thứ trong thẻ href sẽ hiển thị ở phía dưới bên trái của cửa sổ trình duyệt khi bạn di chuột qua nó.

Cá nhân tôi nghĩ rằng có một cái gì đó như javascript: void (0) được hiển thị cho người dùng là ghê tởm.

Thay vào đó, hãy tắt href , thực hiện phép thuật của bạn với jQuery / bất cứ điều gì khác và thêm quy tắc kiểu (nếu bạn vẫn cần nó trông giống như một liên kết):

a {
    cursor:pointer;
}

Câu trả lời tốt nhất luôn luôn là đơn giản nhất. Không cần bất kỳ mã hóa.

Nếu thẻ neo (a) có thuộc tính no href, thì đó chỉ là một trình giữ chỗ cho một siêu liên kết. Được hỗ trợ bởi tất cả các trình duyệt!

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

Bạn có thể vô hiệu hóa các thẻ neo bằng cách trả về false. Trong trường hợp của tôi, tôi đang sử dụng angular và ng-tật cho một hiệp ước Jquery và tôi cần phải vô hiệu hóa các phần.

Vì vậy, tôi đã tạo một đoạn js nhỏ để sửa lỗi này.

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

nếu bạn chỉ muốn tạm thời vô hiệu hóa liên kết nhưng để lại href ở đó để bật sau (đó là điều tôi muốn làm) tôi thấy rằng tất cả các trình duyệt đều sử dụng đầu tiên. Do đó tôi đã có thể làm:

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

Biến thể phù hợp với tôi:

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

<a href="/" disabled="true" onclick="return false">123</a>

Chỉ cần thêm: Điều này nói chung hoạt động, tuy nhiên nó sẽ không hoạt động nếu người dùng đã tắt javascript trong trình duyệt.

1) Bạn có thể tùy ý sử dụng lớp Bootstrap 3 trên thẻ neo của mình để tắt thẻ href, sau khi tích hợp plugin bootstrap 3

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

Hoặc là

2) Tìm hiểu cách bật javascript bằng html hoặc js trong trình duyệt. hoặc tạo một cửa sổ bật lên thông báo cho người dùng kích hoạt javascript bằng cách sử dụng trước khi sử dụng trang web