Como fazer uma marca âncora se referir a nada?

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!

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.

Para fazê-lo não fazer nada, use o seguinte:

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

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 hrefatribua

<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:;">

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 spanelemento para isso, como mencionado anteriormente, mas acho que usar o aelemento é mais elegante.

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

Aqui estão as três maneiras pelas quais <a>a hrefpropriedade 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 ( atag) sem um hrefatributo. Deixe o hrefatributo 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.

O React não suporta mais o uso de uma função como essa href="javascript:void(0)"em sua tag de âncora, mas aqui está algo que funciona muito bem.

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

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.