Làm thế nào để bạn làm cho một liên kết cố định không thể nhấp hoặc bị vô hiệu hóa?

Tôi có một liên kết cố định mà tôi muốn vô hiệu hóa khi người dùng nhấp vào nó. Hoặc, xóa thẻ liên kết xung quanh văn bản, nhưng chắc chắn giữ lại văn bản.

<a href='' id='ThisLink'>some text</a>

Tôi có thể thực hiện việc này dễ dàng với một nút bằng cách thêm .attr("disabled", "disabled");
Tôi đã thêm thành công thuộc tính bị vô hiệu hóa, nhưng liên kết vẫn có thể nhấp được.
Tôi thực sự không quan tâm đến việc văn bản có được gạch chân hay không.

Có manh mối nào không?

Khi bạn nhấp vào nhạc sĩ sai, nó sẽ chỉ thêm "Sai" và sau đó không thể nhấp vào.
Khi bạn nhấp và bạn đã chính xác, nó sẽ thêm "Tuyệt vời" và sau đó tắt tất cả <a>các thẻ.

Tôi chỉ nhận ra những gì bạn đang yêu cầu (tôi hy vọng). Đây là một giải pháp xấu xí

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Phương pháp rõ ràng nhất sẽ là thêm một lớp với sự kiện con trỏ: không có khi bạn muốn tắt một lần nhấp. Nó sẽ hoạt động giống như một nhãn bình thường.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

Sử dụng kiểu CSS con trỏ-sự kiện . (như Jason MacDonald đã đề xuất)

Xem MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Nó được hỗ trợ trong hầu hết các trình duyệt.

Việc thêm đơn giản thuộc tính "bị vô hiệu hóa" vào liên kết sẽ thực hiện công việc nếu bạn có quy tắc CSS chung như sau:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

hoặc là

$('a').click(function(){ return false})

Nó phụ thuộc vào tình hình

Bootstrap cung cấp cho chúng ta .disabledlớp học. Hãy sử dụng nó.

Nhưng .disabledlớp chỉ hoạt động khi thẻ 'a' đã có lớp 'btn'. Nó không hoạt động trên bất kỳ thẻ 'a' cũ nào. Các btnlớp có thể không thích hợp trong một số bối cảnh vì nó có ý nghĩa phong cách. Dưới bìa, .disabledlớp đặt pointer-eventsthành none, vì vậy bạn có thể tạo CSS để làm điều tương tự như Saroj Aryal và Vitrilo đã yêu cầu. (Cảm ơn bạn, Les Nightingill về lời khuyên này).

Thêm một csslớp học:

.disable_a_href{
    pointer-events: none;
}

Thêm cái này jquery:

$("#ThisLink").addClass("disable_a_href"); 

Chỉ cần xóa hrefthuộc tính khỏi thẻ liên kết.

Cách tốt nhất là ngăn chặn hành động mặc định. Trong trường hợp của thẻ liên kết, hành vi mặc định là chuyển hướng đến hrefđịa chỉ được chỉ định.

Vì vậy, javascript sau hoạt động tốt nhất trong tình huống:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Bạn có thể sử dụng sự kiện onclick để vô hiệu hóa hành động nhấp chuột:

<a href='' id='ThisLink' onclick='return false'>some text</a>

Hoặc bạn chỉ có thể sử dụng thứ gì đó khác ngoài <a>thẻ.

Nhận xét của Jason MacDonald phù hợp với tôi, được thử nghiệm trên Chrome, Mozila và IE.

Đã thêm màu xám để hiển thị hiệu ứng vô hiệu hóa.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery chỉ chọn phần tử đầu tiên trong danh sách neo, thêm ký tự meta (*) để chọn và vô hiệu hóa tất cả phần tử có id #ThisLink.

$("#ThisLink*").addClass("disable_a_href"); 

Viết một dòng mã jQuery này

$('.hyperlink').css('pointer-events','none');

nếu bạn muốn viết trong tệp css

.hyperlink{
    pointer-events: none;
}

Tạo lớp sau trong bảng định kiểu:

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

Thêm lớp này cho bạn liên kết động như sau.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Thử đi:

$('a').contents().unwrap();

Đơn giản trong SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Đây là phương pháp tôi đã sử dụng để vô hiệu hóa.

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

Đây sẽ là một cách khác để thực hiện việc này, trình xử lý return falsesẽ vô hiệu hóa liên kết sẽ được thêm vào sau một cú nhấp chuột.

Cách dễ dàng nhất

Trong html của bạn:

<a id="foo" disabled="true">xxxxx<a>

Trong js của bạn:

$('#foo').attr("disabled", false);

Nếu bạn sử dụng nó vì thuộc tính hoạt động hoàn hảo