Làm thế nào để làm cho một thẻ neo đề cập đến không có gì?

Tôi sử dụng jQuery, tôi cần làm cho một số thẻ neo thực hiện không có hành động.

Tôi thường viết nó như thế này:

<a href="#">link</a>

Tuy nhiên, điều này đề cập đến đầu trang!

Nếu bạn không muốn nó chỉ ra bất cứ điều gì, có lẽ bạn không nên sử dụng <a> (neo).

Nếu bạn muốn một cái gì đó trông giống như một liên kết nhưng không hoạt động như một liên kết, tốt nhất là sử dụng phần tử thích hợp (chẳng hạn như <span>) và sau đó tạo kiểu cho nó bằng CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Ngoài ra, do bạn đã gắn thẻ câu hỏi này "jQuery", tôi giả sử rằng bạn muốn đính kèm một trình xử lý sự kiện nhấp chuột. Nếu vậy, chỉ cần làm tương tự như trên và sau đó sử dụng một cái gì đó như JavaScript sau đây:

$('#fake-link-1').click(function() {
    /* put your code here */
});

Có một vài giải pháp ít hơn hoàn hảo:

1. Liên kết đến một neo giả

<a href="#">

Vấn đề: nhấp vào liên kết nhảy trở lại đầu trang

2. Sử dụng thẻ không phải là 'a'

Sử dụng thẻ span và sử dụng jquery để xử lý nhấp chuột

Vấn đề: phá vỡ điều hướng bàn phím, phải thay đổi con trỏ di chuột bằng tay

3. Liên kết đến một hàm void javascript

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

Vấn đề: vỡ khi liên kết hình ảnh trong IE

Giải pháp

Vì tất cả đều có vấn đề của họ, giải pháp tôi đã giải quyết là liên kết với một neo giả, và sau đó trả về false từ phương thức onClick:

<a href="#" onClick="return false;">

Không phải là giải pháp ngắn gọn nhất, nhưng nó giải quyết tất cả các vấn đề với các phương pháp trên.

Để làm cho nó không làm gì cả, sử dụng này:

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

Cách chính xác để xử lý việc này là "ngắt" liên kết với jQuery khi bạn xử lý liên kết

HTML

<a href="#" id="theLink">My Link</a>

Mã não

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

Hai cuộc gọi cuối cùng dừng trình duyệt diễn giải nhấp chuột.

Có rất nhiều cách để làm điều đó như

Không thêm và hrefthuộc tính

<a name="here"> Test <a>

Bạn có thể thêm sự kiện onclick thay vì href như

<a name="here" onclick="YourFunction()"> Test <a>

Hoặc bạn có thể thêm chức năng void như thế này sẽ là cách tốt nhất

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

Bạn có ý nghĩa gì bởi không có gì?

<a href='about:blank'>blank page</a>

hoặc là

<a href='whatever' onclick='return false;'>won't navigate</a>

Tôi nghĩ bạn có thể thử

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

Điều hấp dẫn duy nhất tôi thấy ở đây là bảo mật trình duyệt cấp cao có thể nhắc thực thi javascript.

Mặc dù đây là một trong những cách dễ dàng hơn

<a href="#" onclick="return false;">Link</a>

cái này nên dùng

Đọc bài viết này cho một số gợi ý https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Câu trả lời này cần được cập nhật để phản ánh các tiêu chuẩn web mới (HTML5).

Điều này:

<a tabindex="0">This represents a placeholder hyperlink</a>

... là HTML5 hợp lệ. Thuộc tính tabindex làm cho bàn phím có thể tập trung như các siêu liên kết thông thường. Bạn cũng có thể sử dụng spanyếu tố này như đã đề cập trước đây, nhưng tôi thấy việc sử dụng ayếu tố này thanh lịch hơn.

Xem: https://w3c.github.io/html-reference/a.html
và: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

Dưới đây là ba cách để thuộc tính <a>thẻ của hrefthẻ không đề cập gì:

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

<a href="javascript:;">link</a >

<a href="#" onclick="return false;"> Link </a>

Tôi biết đây là một câu hỏi cũ, nhưng tôi nghĩ dù sao tôi cũng đã thêm hai xu của mình:

Nó phụ thuộc vào những gì liên kết sẽ làm, nhưng thông thường, tôi sẽ chỉ liên kết vào một url có thể hiển thị / làm điều tương tự, ví dụ, nếu bạn đang làm một chút về hộp bật lên:

<a id="about" href="/about">About</a>

Sau đó, với jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

Bằng cách này, các trình duyệt rất cũ (hoặc trình duyệt bị tắt JavaScript) vẫn có thể điều hướng đến một trang riêng biệt, nhưng quan trọng hơn, Google cũng sẽ chọn mục này và thu thập nội dung của trang về.

Đảm bảo tất cả các liên kết mà bạn muốn dừng có href="#!"(hoặc bất cứ thứ gì bạn muốn, thực sự), và sau đó sử dụng:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

Bạn có thể có một neo HTML ( athẻ) mà không có hrefthuộc tính. Để lại hrefthuộc tính & nó sẽ không liên kết đến bất cứ điều gì:

<a>link</a>

Điều duy nhất làm việc cho tôi là sự kết hợp của những điều trên:

Đầu tiên là li trong ul

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

Sau đó, trong LoadTab2_1, tôi đã tự chuyển các tab div

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

Điều này là do việc ngắt kết nối cũng ngắt kết nối hành động trong các tab

Bạn cũng cần thực hiện thủ công kiểu dáng tab khi tab chính thay đổi mọi thứ

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

Bạn có thể làm điều đó bằng cách

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

đây là thẻ neo của tôi. vì vậy, trả về false trên sự kiện onClick = "" không hữu ích ở đây. Tôi vừa xóa thuộc tính href = "#" và nó hoạt động với tôi như dưới đây

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

và tôi cần thêm css này.

.SomeClass
{
    cursor: pointer;
}

Tôi gặp phải vấn đề này trên một trang web WordPress. Các tiêu đề trên menu thả xuống luôn có thuộc tính href=""và plugin tiêu đề chỉ được sử dụng cho phép các url tiêu chuẩn. Giải pháp đơn giản nhất là chạy mã này ở chân trang:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

Điều này sẽ ngăn chặn neo trống làm bất cứ điều gì.

React không còn hỗ trợ sử dụng một chức năng như thế này href="javascript:void(0)"trong thẻ neo của bạn, nhưng đây là một cái gì đó hoạt động khá tốt.

<a href="#" onClick={() => null} >link</a>

Tôi biết điều này được gắn thẻ dưới dạng câu hỏi jQuery, nhưng bạn cũng có thể trả lời câu hỏi này với AngularJS.

trong phần tử của bạn, thêm chỉ thị ng-click và sử dụng biến $ event là sự kiện nhấp ... ngăn chặn hành vi mặc định của nó:

<a href="#" ng-click="$event.preventDefault()">

Bạn thậm chí có thể chuyển biến $ event vào hàm:

<a href="#" ng-click="doSomething($event)">

trong chức năng đó, bạn làm bất cứ điều gì bạn muốn với sự kiện nhấp chuột.