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!
href
atrybutu at.
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!
href
atrybutu at.
Odpowiedzi:
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.
breaks when linking images in IE
Co to znaczy?
<a href="javascript:;">
href="javascript:"
to, że to też wystarczy i działa w najnowszych głównych przeglądarkach. Nie ma potrzeby używania średnika, w rzeczywistości PhpStorm sugeruje nawet jego usunięcie.
Aby w ogóle nic nie robił, użyj tego:
<a href="javascript:void(0)"> ... </a>
<a href="javascript:;">
. PS nie działa target=_blank
jednak
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 href
przypisuj
<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:;">
href
atrybut, ponieważ nie będzie on już zachowywał się jak hiperłącze (nawet jeśli onclick nadal działa), będziesz musiał zresetować rzeczy takie jak cursor: pointer;
i :hover
selektor.
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ć span
do tego elementu, jak wspomniano wcześniej, ale uważam, że użycie a
elementu jest bardziej eleganckie.
Zobacz: https://w3c.github.io/html-reference/a.html
i: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href
click
zdarzenia, gdy użytkownik skupi się na elemencie i naciśnie klawisz Enter (testowane w przeglądarce Firefox 51).
keydown
wydarzenia.
Oto trzy sposoby, <a>
w jakie href
wł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 ( a
tag) bez href
atrybutu. Pozostaw href
atrybut, 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ć.
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.