Có cách nào để vô hiệu hóa một liên kết bằng CSS không?

Tôi có một lớp được gọi current-pagevà muốn liên kết với lớp này bị vô hiệu hóa để không có hành động nào xảy ra khi chúng được nhấp.

Câu trả lời đã có trong các bình luận của câu hỏi. Để dễ nhìn hơn, tôi đang sao chép giải pháp này tại đây:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

Để được hỗ trợ trình duyệt, vui lòng xem https://caniuse.com/#feat=pulum-events . Nếu bạn cần hỗ trợ IE, có một cách giải quyết; thấy câu trả lời này .

Cảnh báo: Việc sử dụng pointer-eventsCSS cho các phần tử không phải SVG là thử nghiệm. Tính năng từng là một phần của đặc tả dự thảo UI CSS3, nhưng do nhiều vấn đề mở, đã bị hoãn lại với CSS4.

CSS chỉ có thể được sử dụng để thay đổi phong cách của một cái gì đó. Điều tốt nhất bạn có thể làm với CSS thuần túy là ẩn liên kết hoàn toàn.

Những gì bạn thực sự cần là một số javascript. Đây là cách bạn làm những gì bạn muốn bằng thư viện jQuery.

$('a.current-page').click(function() { return false; });

CSS không thể làm điều đó. CSS chỉ để trình bày. Lựa chọn của bạn là:

• Không bao gồm hrefthuộc tính trong của bạn<a> thẻ .
• Sử dụng JavaScript, để tìm các phần tử neo với điều đó classvà loại bỏ các thuộc tính hrefhoặc onclickthuộc tính của chúng tương ứng. jQuery sẽ giúp bạn điều đó (NickF đã chỉ ra cách làm một cái gì đó tương tự nhưng tốt hơn).

Liên kết vô hiệu hóa Bootstrap

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Nút vô hiệu hóa Bootstrap nhưng có vẻ như liên kết

<button type="button" class="btn btn-link">Link</button>

Bạn có thể đặt hrefthuộc tính thànhjavascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

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

Tôi đã sử dụng:

.current-page a:hover {
pointer-events: none !important;
}

Và không đủ; trong một số trình duyệt nó vẫn hiển thị liên kết, nhấp nháy.

Tôi đã phải thêm:

.current-page a {
cursor: text !important;
}

Nếu bạn muốn chỉ sử dụng HTML / CSS trên một biểu mẫu, một tùy chọn khác là sử dụng một nút. Tạo kiểu cho nó và đặtdisabled thuộc tính.

Ví dụ: http://jsfiddle.net/cFTxH/1/

Nếu bạn muốn nó chỉ là CSS, logic vô hiệu hóa phải được xác định bởi CSS.

Để di chuyển logic trong các định nghĩa CSS, bạn sẽ phải sử dụng các bộ chọn thuộc tính. Dưới đây là một số ví dụ:

Vô hiệu hóa liên kết có chính xác href: =

Bạn có thể chọn tắt các liên kết có chứa giá trị href cụ thể như vậy:

<a href="//website.com/exact/path">Exact path</a>

[href="https://stackoverflow.com//website.com/exact/path"]{
  pointer-events: none;
}

Vô hiệu hóa một liên kết có chứa một phần của đường dẫn: *=

Tại đây, mọi liên kết chứa /keyword/trong đường dẫn sẽ bị vô hiệu hóa

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Vô hiệu hóa một liên kết bắt đầu bằng: ^=

các [attribute^=value]nhà điều hành mục tiêu một thuộc tính mà bắt đầu với một giá trị cụ thể. Cho phép bạn loại bỏ các trang web và đường dẫn gốc.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Bạn thậm chí có thể sử dụng nó để vô hiệu hóa các liên kết không https. Ví dụ :

a:not([href^="https://"]){
  pointer-events: none;
}

Vô hiệu hóa một liên kết kết thúc bằng: $=

Các [attribute$=value]nhà điều hành nhắm vào một thuộc tính mà kết thúc với một giá trị cụ thể. Nó có thể hữu ích để loại bỏ phần mở rộng tập tin.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Hoặc bất kỳ thuộc tính nào khác

Css có thể nhắm mục tiêu bất kỳ thuộc tính HTML. Có thể là rel, target, data-customvà vân vân ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Kết hợp các bộ chọn thuộc tính

Bạn có thể xâu chuỗi nhiều quy tắc. Giả sử bạn muốn vô hiệu hóa mọi liên kết bên ngoài, nhưng không phải những liên kết trỏ đến trang web của bạn:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Hoặc vô hiệu hóa liên kết đến tệp pdf của một trang web cụ thể:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Hỗ trợ trình duyệt

Các bộ chọn thuộc tính được hỗ trợ kể từ IE7. :not()bộ chọn từ IE9.

Một cách bạn có thể làm điều này với CSS, là đặt CSS trên một gói div mà bạn đặt biến mất và một cái gì đó khác diễn ra.

Ví dụ:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

Với CSS như

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Để thực sự tắt, abạn sẽ phải thay thế sự kiện nhấp chuột hoặchref , như được mô tả bởi những người khác.

Tái bút: Chỉ cần làm rõ Tôi coi đây là một giải pháp khá gọn gàng và đối với SEO nó cũng không phải là tốt nhất, nhưng tôi tin rằng nó là tốt nhất với CSS hoàn toàn.

Thử cái này:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

Các con trỏ-sự kiện bất động sản cho phép kiểm soát cách các phần tử HTML đáp ứng với chuột / cảm ứng sự kiện - bao gồm cả di chuột CSS / bang hoạt động, nhấp chuột / sự kiện tap trong Javascript, và có hoặc không phải là con trỏ có thể nhìn thấy.

Đó không phải là cách duy nhất bạn vô hiệu hóa Liên kết , mà là cách CSS tốt hoạt động trong IE10 + và tất cả các trình duyệt mới:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

Tôi đã tìm kiếm trên internet và thấy không tốt hơn thế này . Về cơ bản để tắt chức năng nhấp vào nút, chỉ cần thêm kiểu CSS bằng jQuery như vậy:

$("#myLink").css({ 'pointer-events': 'none' });

Sau đó, để kích hoạt nó một lần nữa làm điều này

$("#myLink").css({ 'pointer-events': '' });

Đã kiểm tra trên Firefox và IE 11, nó đã hoạt động.

bạn có thể sử dụng css này:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

Nhờ mọi người đã đăng các giải pháp, tôi đã kết hợp nhiều cách tiếp cận để cung cấp một số disabledchức năng nâng cao hơn . Đây là một ý chính , và mã dưới đây.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Đây là lớp coffescript:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Bạn cũng có thể kích thước một yếu tố khác để nó bao phủ các liên kết (sử dụng chỉ số z bên phải): Điều đó sẽ "ăn" các nhấp chuột.

(Chúng tôi đã phát hiện ra điều này một cách tình cờ vì chúng tôi gặp sự cố với các liên kết không hoạt động đột ngột do thiết kế "phản ứng nhanh" khiến H2 che phủ chúng khi cửa sổ trình duyệt có kích thước di động.)

Demo tại đây
Hãy thử cái này

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

Một mẹo khác là đặt một yếu tố vô hình lên trên nó. Điều này cũng sẽ vô hiệu hóa bất kỳ hiệu ứng di chuột nào

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

Có thể làm điều đó bằng CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Xem tại:

Xin lưu ý rằng text-decoration: none;và color: black;không cần thiết nhưng nó làm cho liên kết trông giống văn bản thuần túy hơn.

pointer-events:none sẽ vô hiệu hóa liên kết:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>