Eu uso o jQuery, preciso fazer com que algumas tags de âncora não executem nenhuma ação.
Eu costumo escrever assim:
<a href="#">link</a>
No entanto, isso se refere ao topo da página!
href
atributo nele.
Eu uso o jQuery, preciso fazer com que algumas tags de âncora não executem nenhuma ação.
Eu costumo escrever assim:
<a href="#">link</a>
No entanto, isso se refere ao topo da página!
href
atributo nele.
Respostas:
Se você não quer que aponte para nada, provavelmente não deve usar a <a>
tag (anchor).
Se você deseja que algo pareça um link, mas não um link, é melhor usar o elemento apropriado (como <span>
) e estilizá-lo usando CSS:
<span class="fake-link" id="fake-link-1">Am I a link?</span>
.fake-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
Além disso, considerando que você marcou essa pergunta como "jQuery", suponho que você queira anexar um manipulador de eventos de clique. Nesse caso, faça o mesmo que acima e use algo como o seguinte JavaScript:
$('#fake-link-1').click(function() {
/* put your code here */
});
Existem algumas soluções menos que perfeitas:
1. Link para uma âncora falsa
<a href="#">
Problema: clicar no link volta ao topo da página
2. Usando uma tag diferente de 'a'
Use uma tag span e use o jquery para manipular o clique
Problema: interrompe a navegação do teclado, precisa alterar manualmente o cursor do mouse
3. Link para uma função de javascript nulo
<a href="javascript:void(0);">
<a href="javascript:;">
Problema: quebra ao vincular imagens no IE
Solução
Como todos eles têm seus problemas, a solução em que eu decidi é vincular a uma âncora falsa e retornar false a partir do método onClick:
<a href="#" onClick="return false;">
Não é a solução mais concisa, mas resolve todos os problemas com os métodos acima.
breaks when linking images in IE
O que isto significa?
<a href="javascript:;">
href="javascript:"
também é suficiente e funciona nos principais navegadores mais recentes. Não há necessidade de ponto e vírgula, na verdade o PhpStorm sugere até removê-lo.
Para fazê-lo não fazer nada, use o seguinte:
<a href="javascript:void(0)"> ... </a>
<a href="javascript:;">
. O PS não trabalhar com target=_blank
embora
A maneira correta de lidar com isso é "quebrar" o link com o jQuery quando você lida com o link
HTML
<a href="#" id="theLink">My Link</a>
JS
$('#theLink').click(function(ev){
// do whatever you want here
ev.preventDefault();
ev.stopPropagation();
});
Essas duas chamadas finais param o navegador para interpretar o clique.
Existem muitas maneiras de fazer isso como
Não adicione e href
atribua
<a name="here"> Test <a>
Você pode adicionar um evento onclick em vez de href como
<a name="here" onclick="YourFunction()"> Test <a>
Ou você pode adicionar uma função nula como esta, que seria a melhor maneira
<a href="javascript:void(0);">
<a href="javascript:;">
href
atributo, pois ele não se comportará mais como um hiperlink (mesmo que o onclick ainda funcione), você precisará redefinir as coisas como cursor: pointer;
o :hover
seletor.
O que você quer dizer com nada?
<a href='about:blank'>blank page</a>
ou
<a href='whatever' onclick='return false;'>won't navigate</a>
Eu acho que você pode tentar
<a href="JavaScript:void(0)">link</a>
O único problema que vejo aqui é que a segurança do navegador de alto nível pode solicitar a execução do javascript.
Embora esta seja uma das maneiras mais fáceis do que
<a href="#" onclick="return false;">Link</a>
isso deve ser usado com moderação
Leia este artigo para obter alguns ponteiros https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void
Esta resposta deve ser atualizada para refletir novos padrões da web (HTML5).
Este:
<a tabindex="0">This represents a placeholder hyperlink</a>
... é HTML5 válido. O atributo tabindex torna o teclado focável como hiperlinks normais. Você também pode usar o span
elemento para isso, como mencionado anteriormente, mas acho que usar o a
elemento é mais elegante.
Consulte: https://w3c.github.io/html-reference/a.html
e: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href
click
evento quando o usuário focaliza o elemento e pressiona enter (testado no Firefox 51).
keydown
evento.
Aqui estão as três maneiras pelas quais <a>
a href
propriedade da tag não se refere a nada:
<a href="JavaScript:void(0)"> link </a>
<a href="javascript:;">link</a >
<a href="#" onclick="return false;"> Link </a>
Sei que essa é uma pergunta antiga, mas pensei em adicionar meus dois centavos de qualquer maneira:
Depende do que o link fará, mas normalmente eu apontaria o link para um URL que poderia estar exibindo / fazendo a mesma coisa, por exemplo, se você estiver fazendo um pouco de pop-up:
<a id="about" href="/about">About</a>
Então com jQuery
$('#about').click(function(e) {
$('#aboutbox').show();
e.preventDefault();
});
Dessa forma, navegadores muito antigos (ou com o JavaScript desativado) ainda podem navegar para uma página sobre separada, mas o mais importante é que o Google também irá buscá-la e rastrear o conteúdo da página sobre.
Certifique-se de que todos os seus links que você deseja parar href="#!"
(ou qualquer coisa que você queira realmente) e use o seguinte:
jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
event.preventDefault();
});
Você pode ter uma âncora HTML ( a
tag) sem um href
atributo. Deixe o href
atributo e ele não será vinculado a nada:
<a>link</a>
A única coisa que funcionou para mim foi uma combinação dos itens acima:
Primeiro o li no ul
<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>
Depois, no LoadTab2_1, mudei manualmente as divs da guia
$("#tabs-2-1").hide();
$("#tabs-2-2").show();
Isso ocorre porque a desconexão do também desconecta a ação nas guias
Você também precisa fazer o estilo da guia manualmente quando a guia principal muda as coisas
$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
$("#secTab1 a").css("color", "#ffffff");
Você pode fazer isso
<a style='cursor:pointer' >Link</a>
<a href="#" onclick="SomeFunction()" class="SomeClass">sth.</a>
essa foi a minha âncora. portanto, retorne false no evento onClick = "" não é útil aqui. Acabei de remover a propriedade href = "#" e funcionou para mim como abaixo
<a onclick="SomeFunction()" class="SomeClass">sth.</a>
e eu precisava adicionar este css.
.SomeClass
{
cursor: pointer;
}
Encontrei esse problema em um site WordPress. Os cabeçalhos nos menus suspensos sempre tinham o atributo, href=""
e o plug-in de cabeçalho usado apenas permitia URLs padrão. A solução mais fácil para executar esse código no rodapé:
jQuery('[href=""]').click(function(e){
e.preventDefault();
});
Isso impedirá que âncoras em branco façam qualquer coisa.
Eu sei que isso está marcado como uma pergunta do jQuery, mas você também pode responder isso com o AngularJS.
no seu elemento, adicione a diretiva ng-click e use a variável $ event, que é o evento click ... evite seu comportamento padrão:
<a href="#" ng-click="$event.preventDefault()">
Você pode até passar a variável $ event para uma função:
<a href="#" ng-click="doSomething($event)">
nessa função, você faz o que quiser com o evento click.