Como fazer uma marca âncora se referir a nada?


159

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!


porque jquery irá lidar com o evento clique então eu quero o link para ser como um elo achor mas se comportam como uma função JavaScript
Ahmed


1
Conforme mencionado em uma das respostas abaixo: se você não deseja que um link aponte para um recurso, não use o elemento A.
Mathias Bynens

Não use o hrefatributo nele.
vsync 16/05

Respostas:


103

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 */
});

37
Isso tem um problema: não permite a navegação por guias.

6
Observe que (como Iraimbilanja aponta) a abordagem de span aqui desativa a possibilidade de invocar a função usando o teclado, o que eu consideraria um problema de usabilidade.
233 Fredrik Mörk

3
Também é um problema de acessibilidade. Você pode resolvê-lo usando um elemento de botão (gerado a partir do JavaScript para que usuários não-JS não obtenham um controle quebrado).
Quentin

4
Aqui está uma solução rápida para isso: tabindex = "0" em um elemento não vinculado permitirá a navegação do teclado na maioria dos navegadores modernos.
Mathias Bynens

1
Outro 'problema' é que você não faz a pseudo classe CSS: hover não funciona em elementos que não são links no IE6. Mas como você adiciona esses elementos por meio do JavaScript (pelo menos deveria), você também pode escrever um script que adicione uma classe .hover ao elemento quando passar o mouse.
Mathias Bynens

268

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.


2
Eu costumo usar o javascript: void (0); abordagem, porque usar # exibe o URL atual na barra do Firefox ao passar o mouse, o que pode ser enganoso para o usuário.
lucaferrario 23/07

8
breaks when linking images in IEO que isto significa?
Eugene

14
@eugene esta pergunta tem 3 anos agora, mas o IE costumava fazer imagens desaparecerem quando cercadas por um link para uma função nula. Não tenho certeza de quando foi corrigido, mas funciona no IE10, que é tudo o que tenho instalado. Pessoalmente, agora eu uso<a href="javascript:;">
zaius

1
Também usei comentários lá: <a href="javascript:void(0); // Mostrar paleta de propriedades">. Dessa forma, quando o usuário passa o mouse, ele vê o comentário que pode dar uma dica do que esperar ao clicar. (Embora você também possa usar uma dica de ferramenta).
Robin Zimmermann

5
Parece que 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.
Jlh

40

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

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

1
ou apenas <a href="javascript:;">. O PS não trabalhar com target=_blankembora
Alex

36

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.


5
Embora isso pareça "adequado" porque interrompe a subida do evento, "return false" é muito menos detalhado e faz a mesma coisa. A única vez que você deseja fazer isso é se você já possui manipuladores de eventos registrados para clicar em links via jQuery.
Aleemb 29/05

25

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 atributo name é necessário?
Petrus Theron

@PetrusTheron Não é necessário. .
precisa saber é o seguinte

Este é um rip-off de respostas pré-existentes
aross

1
Não se esqueça de definir o estilo da sua marca de âncora se você remover o hrefatributo, 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 :hoverseletor.
Partack

@Partack Correct .. Obrigado por perceber
Punit Gajjar

24

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>

1
Concordou - basta retornar falso do seu método jQuery e voila, não vai a lugar nenhum
joshcomley

14

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


Resposta correta, permite a navegação por abas.
K - A toxicidade no SO está crescendo.

14

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


1
Este também é HTML4 válido, mas não estilizará a âncora como um link.
usar o seguinte comando

1
Eu não sabia que era html4 válido, mas a especificação do HTML5 menciona explicitamente o caso de uso. E os estilos que não segmentam o atributo href funcionarão muito bem, apenas os estilos padrão do navegador podem ser um problema.
aross

1
Isso também não aciona o clickevento quando o usuário focaliza o elemento e pressiona enter (testado no Firefox 51).
torvin

@torvin, isso é simples. Use o keydownevento.
Aross10 /

snazzy peculiaridade, mas na janela 10 que acrescenta uma caixa delimitada em torno do elemento
1-14x0r

12

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>

1
Esta é apenas uma duplicata da resposta mais votada no momento , mas com menos informações
aross

5

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.


5

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();
});

4

Você pode ter uma âncora HTML ( atag) sem um hrefatributo. Deixe o hrefatributo e ele não será vinculado a nada:

<a>link</a>

Obrigado! Funcionou perfeitamente para o meu caso. Onde eu queria que a tag Anchor fosse aberta em uma nova guia quando houver URL, mas nada se não houver URL. No caso de #, estava aceitando um CLIQUE e movendo-o para o topo da página. Não tendo parte href como você sugeriu. Resolveu o problema! A formatação parece ótima devido a uma tag, problema de cliques sem href. Obrigado!!!
Mohsin

1
Se alguém mais estiver pensando se o HTML5 é válido, a resposta é SIM :) stackoverflow.com/a/33046203/5323892 . Aqui está o exemplo da página de normas (consulte o terceiro item li): <nav> <ul> <li> <a href="https://stackoverflow.com/"> Página inicial </a> </li> <li> <a href = "/ notícias "> Notícias </a> </li> <li> <a> Exemplos </a> </li> <li> <a href="https://stackoverflow.com/legal"> Jurídico </a> </li> </ -> </nav>
Mohsin

Funciona, mas se você quiser que o ponteiro do mouse mude para dedo, basta adicionar href = "JavaScript: void (0)" conforme sugerido na resposta de @Rutesh Makhijani.
Tarik

3

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


1
<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;
}

O que você quer dizer com isso. O que é recomendado e por quê?
Burk

É uma boa prática manter o javascript e o html em arquivos separados, eis uma resposta detalhada: stackoverflow.com/questions/5871640/…
Alexandru Severin

1

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.


0

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>

-1

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.