Có thể tạo thẻ neo HTML không thể nhấp / liên kết bằng CSS không?

Ví dụ: nếu tôi có cái này:

<a style="" href="page.html">page link</a>

Có bất cứ điều gì tôi có thể sử dụng cho thuộc tính style sẽ làm cho nó để liên kết không thể nhấp được và sẽ không đưa tôi đến page.html không?

Hoặc, là tùy chọn duy nhất của tôi chỉ đơn giản là không bọc 'liên kết trang' trong thẻ neo?

Chỉnh sửa: Tôi muốn nêu lý do tại sao tôi muốn làm điều này để mọi người có thể cung cấp lời khuyên tốt hơn. Tôi đang cố gắng thiết lập ứng dụng của mình để nhà phát triển có thể chọn loại kiểu điều hướng mà họ muốn.

Vì vậy, tôi có một danh sách các liên kết và một liên kết hiện luôn được chọn và tất cả các liên kết khác không có. Đối với các liên kết không được chọn, rõ ràng tôi muốn chúng là các thẻ neo có thể nhấp bình thường. Nhưng đối với liên kết đã chọn, một số người thích liên kết đó vẫn có thể nhấp trong khi những người khác muốn làm cho liên kết đó không thể nhấp được.

Bây giờ tôi có thể dễ dàng chỉ lập trình không bọc một thẻ neo xung quanh liên kết đã chọn. Nhưng tôi cho rằng nó sẽ thanh lịch hơn nếu tôi luôn có thể bọc liên kết đã chọn trong một cái gì đó như:

<a id="current" href="link.html">link</a>

và sau đó cho phép nhà phát triển kiểm soát kiểu liên kết thông qua CSS.

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

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

Và sau đó gán lớp cho mã html của bạn:

<a style="" href="page.html" class="inactiveLink">page link</a>

Nó làm cho liên kết không thể nhấp và kiểu con trỏ là một mũi tên, không phải là bàn tay như các liên kết có.

hoặc sử dụng kiểu này trong html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

nhưng tôi đề nghị cách tiếp cận đầu tiên.

Điều đó không dễ thực hiện với CSS, vì nó không phải là ngôn ngữ hành vi (tức là JavaScript), cách dễ dàng duy nhất là sử dụng sự kiện OnClick JavaScript trên neo của bạn và trả về nó là sai, đây có thể là mã ngắn nhất bạn có thể sử dụng cho điều đó:

<a href="page.html" onclick="return false">page link</a>

Có .. Có thể sử dụng css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Hoặc hoàn toàn là HTML và CSS không có sự kiện:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

CSS được thiết kế để ảnh hưởng đến việc trình bày, không phải hành vi.

Bạn có thể sử dụng một số JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

Một cách khó hiểu hơn (giả sử bạn sử dụng jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

Javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

Ưu điểm của việc này là sự tách biệt rõ ràng giữa logic và trình bày. Nếu một ngày nào đó bạn quyết định rằng liên kết này sẽ làm một cái gì đó khác, bạn không phải gặp rắc rối với việc đánh dấu, chỉ là JS.

Câu trả lời là:

<a href="page.html" onclick="return false">page link</a>

Nó có thể được thực hiện trong css và nó rất đơn giản. thay đổi "a" thành "p". "Liên kết trang" của bạn sẽ không dẫn đến một nơi nào đó nếu bạn muốn làm cho nó không thể xem được.

Khi bạn bảo css của bạn thực hiện hành động di chuột trên "p" cụ thể này, hãy nói với nó điều này:

(ví dụ này tôi đã đưa ra ID "p" "ví dụ")

#example
{
  cursor:default;
}

Bây giờ con trỏ của bạn sẽ giữ nguyên như trên tất cả các trang.

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>