Jak sprawić, by kotwica nic nie odnosiła się?

Używam jQuery, muszę sprawić, aby niektóre znaczniki kotwicy nie wykonywały żadnej akcji.

Zwykle piszę to tak:

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

Jednak odnosi się to do góry strony!

Jeśli nie chcesz, aby cokolwiek wskazywało, prawdopodobnie nie powinieneś używać <a>tagu (kotwica).

Jeśli chcesz, aby coś wyglądało jak link, ale nie zachowywało się jak łącze, najlepiej użyć odpowiedniego elementu (takiego jak <span>), a następnie nadać mu styl za pomocą CSS:

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

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

Ponadto, biorąc pod uwagę, że oznaczyłeś to pytanie jako „jQuery”, zakładam, że chcesz dołączyć moduł obsługi zdarzenia kliknięcia. Jeśli tak, po prostu zrób to samo, co powyżej, a następnie użyj czegoś takiego jak następujący JavaScript:

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

Istnieje kilka mniej niż doskonałych rozwiązań:

1. Link do fałszywej kotwicy

<a href="#">

Problem: kliknięcie linku powoduje przejście z powrotem na górę strony

2. Używanie tagu innego niż „a”

Użyj tagu span i jQuery, aby obsłużyć kliknięcie

Problem: przerywa nawigację po klawiaturze, trzeba ręcznie zmienić kursor

3. Link do funkcji void javascript

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

Problem: przerwy podczas łączenia obrazów w IE

Rozwiązanie

Ponieważ wszystkie one mają swoje problemy, rozwiązaniem, na które się zdecydowałem, jest połączenie z fałszywą kotwicą, a następnie zwrócenie wartości false z metody onClick:

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

Nie jest to najbardziej zwięzłe rozwiązanie, ale rozwiązuje wszystkie problemy z powyższymi metodami.

Aby w ogóle nic nie robił, użyj tego:

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

Prawidłowym sposobem rozwiązania tego problemu jest „zerwanie” łącza za pomocą jQuery podczas obsługi łącza

HTML

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

JS

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

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

Te dwa ostatnie wywołania uniemożliwiają przeglądarce interpretację kliknięcia.

Jest na to wiele sposobów

Nie dodawaj i nie hrefprzypisuj

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

Możesz dodać zdarzenie onclick zamiast href jak

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

Lub możesz dodać funkcję void, która byłaby najlepszym sposobem

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

Co masz na myśli przez nic?

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

lub

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

Myślę, że możesz spróbować

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

Jedyny haczyk, jaki tutaj widzę, to wysoki poziom zabezpieczeń przeglądarki, który może monitować o wykonanie javascript.

Chociaż jest to jeden z łatwiejszych sposobów niż

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

powinno to być używane oszczędnie

Przeczytaj ten artykuł, aby uzyskać wskazówki https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Ta odpowiedź powinna zostać zaktualizowana, aby odzwierciedlić nowe standardy sieciowe (HTML5).

To:

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

... jest prawidłowym HTML5. Atrybut tabindex sprawia, że ​​można go ustawić za pomocą klawiatury, tak jak zwykłe hiperłącza. Równie dobrze możesz użyć spando tego elementu, jak wspomniano wcześniej, ale uważam, że użycie aelementu jest bardziej eleganckie.

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

Oto trzy sposoby, <a>w jakie hrefwłaściwość tagu nie odwołuje się do niczego:

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

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

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

Wiem, że to stare pytanie, ale pomyślałem, że i tak dodam moje dwa centy:

Zależy to od tego, co zrobi link, ale zazwyczaj wskazywałbym link na adres URL, który może wyświetlać / robić to samo, na przykład, jeśli robisz trochę o wyskakującym okienku:

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

Następnie z jQuery

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

W ten sposób bardzo stare przeglądarki (lub przeglądarki z wyłączoną obsługą JavaScript) mogą nadal przechodzić do oddzielnej strony about, ale co ważniejsze, Google również ją pobierze i zaindeksuje zawartość strony about.

Upewnij się, że wszystkie linki, które chcesz przestać, mają href="#!"(lub cokolwiek chcesz, naprawdę), a następnie użyj tego:

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

Możesz mieć kotwicę HTML ( atag) bez hrefatrybutu. Pozostaw hrefatrybut, a nie będzie on do niczego prowadzić:

<a>link</a>

Jedyną rzeczą, która zadziałała dla mnie, była kombinacja powyższych:

Najpierw li przy ul

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

Następnie w LoadTab2_1 ręcznie przełączyłem karty div

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

Dzieje się tak dlatego, że odłączenie się odłącza również akcję w zakładkach

Musisz także ręcznie zmienić styl karty, gdy główna karta zmieni rzeczy

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

Możesz to zrobić przez

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

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

to był mój tag kotwicy. więc zwracanie false na zdarzenie onClick = "" nie jest tutaj przydatne. Właśnie usunąłem właściwość href = "#" i działała ona tak jak poniżej

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

i musiałem dodać ten CSS.

.SomeClass
{
    cursor: pointer;
}

Napotkałem ten problem w witrynie WordPress. Nagłówki w menu rozwijanych zawsze miały atrybut, href=""a używana wtyczka nagłówka dopuszczała tylko standardowe adresy URL. Najłatwiejszym rozwiązaniem było po prostu uruchomienie tego kodu w stopce:

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

Dzięki temu puste kotwice nie będą cokolwiek robić.

React nie obsługuje już używania takiej funkcji href="javascript:void(0)"w tagu kotwicy, ale tutaj jest coś, co działa całkiem nieźle.

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

Wiem, że to jest oznaczone jako pytanie jQuery, ale możesz odpowiedzieć na to również za pomocą AngularJS.

w swoim elemencie dodaj dyrektywę ng-click i użyj zmiennej $ event, która jest zdarzeniem kliknięcia ... zapobiegaj jej domyślnemu zachowaniu:

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

Możesz nawet przekazać zmienną $ event do funkcji:

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

w tej funkcji robisz, co chcesz ze zdarzeniem kliknięcia.