É possível tornar uma tag de âncora HTML não clicável / vinculável usando CSS?

132

Por exemplo, se eu tiver isso:

<a style="" href="page.html">page link</a>

Existe algo que eu possa usar para o atributo style que faça com que o link não seja clicável e não me leve ao page.html?

Ou, é minha única opção para simplesmente não agrupar 'link da página' em uma tag de âncora?

Edit: Quero declarar por que quero fazer isso para que as pessoas possam fornecer melhores conselhos. Estou tentando configurar meu aplicativo para que o desenvolvedor possa escolher o tipo de estilo de navegação que deseja.

Então, eu tenho uma lista de links e um está sempre selecionado no momento e os outros não. Para os links que não estão selecionados, eu obviamente quero que sejam tags âncora clicáveis ​​normais. Mas para o link selecionado, algumas pessoas preferem que o link permaneça clicável, enquanto outras gostam de torná-lo não clicável.

Agora eu poderia facilmente não programaticamente colocar uma âncora em torno do link selecionado. Mas acho que será mais elegante se eu puder sempre quebrar o link selecionado em algo como:

<a id="current" href="link.html">link</a>

e, em seguida, deixe o desenvolvedor controlar o estilo de vinculação por meio de CSS.

Ryan
fonte
3
Se você não quiser clicar, talvez use um <span>?
David diz que restaura Monica
Eu teria que concordar com David. Não quebre os paradigmas da interface do usuário. A expectativa de um usuário é que os links possam ser clicados. Se não pode ser clicado, então não é realmente um link, é?
22411 mrtsherman
Confira stackoverflow.com/questions/2091168/disable-a-link-using-css para obter mais respostas possíveis.
Oliver
Sim, é uma péssima ideia. Os leitores de tela ainda verão o link como um link, porque é um link. Motores de busca também. De fato, qualquer coisa que entenda HTML. Não faça isso. Não há nada de "elegante" nisso.
Paul D. Waite

Respostas:

267

Você pode usar este css:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

E, em seguida, atribua a classe ao seu código html:

<a style="" href="page.html" class="inactiveLink">page link</a>

Isso torna o link não clicável e o cursor forma uma seta, não uma mão como os links.

ou use este estilo no html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

mas sugiro a primeira abordagem.

Diego Unanue
fonte
Posso confirmar que isso funciona na versão Ubuntu do Firefox / Chrome. Pensando se ele vai funcionar no IE no Windows.
31414 JohnMerlino
3
A chave para esta solução é: pointer-events. Aqui o link para a compatibilidade da tabela
masegaloeh
@ JohnMerlino: não funciona no IE9. Veja mais no link de masegaloeh para a tabela de compatibilidade
Howie
Ressalva: Tabbing para mover o foco para o link e usando Enter para ativar o link continuará a funcionar
wtho
Eu não acho cursor: o padrão é necessário. Contanto que você tenha eventos-ponteiro: nenhum, isso parece funcionar.
kloddant
51

Isso não é muito fácil de fazer com CSS, como não é uma linguagem comportamental (por exemplo, JavaScript), a única maneira fácil seria usar um JavaScript OnClick Event na sua âncora e retorná-lo como falso, esse é provavelmente o código mais curto você poderia usar para isso:

<a href="page.html" onclick="return false">page link</a>
Karan K
fonte
2
@ Mike Este faz o clique não fazer nada, mas o botão ainda parece clicável.
Acostache #
1
@ acostache usando style = "cursor: padrão;" deve ajudar com o ponteiro
John
4
A pergunta era: "using CSS", então esta é uma resposta boa, mas não a correta.
Roman Holzner
É melhor usar css do que onclick = "return false" por três razões principais: 1- Com o css, você pode alterar o cursor do mouse do link padrão para a seta padrão. 2- Isso é intrusivo js. 3- Na verdade, está retornando um valor, você não deseja retornar falso toda vez que clicar no link.
Diego Unanue
11

Sim .. É possível usando css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}
palhaço
fonte
Esta é a maneira mais limpa, mas uma ressalva: ele só é suportado no IE11 + caniuse.com
pixelfreak
8

Ou apenas HTML e CSS sem eventos:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>
Paulo
fonte
1
-1 porque esta é uma maneira bastante complicada / confusa de resolver o problema. Também não faz realmente o que a pergunta faz (torne o link inativo). Apenas cobre o link com um elemento invisível. A resposta de Diego é muito mais limpa.
development
@desenvolvimento Acho que a resposta de Diego também é melhor e deve ser votada mais alta e aceita. No entanto, quando escrevi esta resposta (há 3 anos) pointer-eventsquase não tinha suporte para o navegador.
Paulo
@ Paulpro Eu meio que percebi que era o caso. Desculpe pelo voto negativo! Só quero ter certeza de que a resposta mais atualizada está no topo. Obrigado pela resposta.
developering
6

O CSS foi projetado para afetar a apresentação, não o comportamento.

Você poderia usar algum JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};
alex
fonte
5

Uma maneira mais discreta (supondo que você use jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

Javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

A vantagem disso é a separação clara entre lógica e apresentação. Se um dia você decidir que esse link faria outra coisa, não precisará mexer na marcação, apenas no JS.

pixelfreak
fonte
4
Você sabe que você poderia facilmente escrever código não jQuery para fazer a mesma coisa que iria correr um pouco mais rápido: document.getElementById('my-link').onclick = function(){ return false; };
Paul
1
Eu acho que a maioria das pessoas quer (e deve) usar algum tipo de estrutura para facilitar o desenvolvimento. O autor não especificou nenhuma restrição de desempenho, mas o jQuery compactado e compactado com gzip é de apenas 31 KB. Eu acho que o benefício supera em muito o custo.
Pixelfreak
2
Seriamente? Qual navegador não suporta onclick ou getElementById. Ok, então o IE 2 não suporta onclick, mas também não suporta CSS ... e duvido muito que seu código jQuery também funcione no IE 2.
Paulo
1
A diferença de velocidade pode ser pequena, mas não se você não puder tempo de download da biblioteca jQuery. Eu realmente não acho que seja uma boa idéia usar o uso encorajador do jQuery quando você não precisar, porque as pessoas se tornam dependentes dele e esquecem como escrever Javascript sem ele.
Paul
4
@PaulPRO Esta discussão é discutível sem os requisitos do autor. Cada estrutura tem seu objetivo. Se ele não é fluente em JS e está apenas criando um site para mamãe e papai e precisa manipular algum elemento DOM, seria muito mais fácil para ele usar uma estrutura. Sua relutância em usar qualquer estrutura é ridícula. PHP é escrito em C. Isso significa que você deve escrever C e não usar PHP? O iOS possui UIKit, Core Data, Quartz, etc. O Flash possui várias bibliotecas de terceiros usadas com frequência. Novamente, cada estrutura tem seu objetivo. Uma mentalidade purista e não construída em casa não ajuda ninguém.
Pixelfreak
2

A resposta é:

<a href="page.html" onclick="return false">page link</a>
Doa
fonte
0

Isso pode ser feito em css e é muito simples. mude o "a" para um "p". O seu "link da página" não leva a nenhum lugar, se você quiser torná-lo impossível de clicar.

Quando você instruir seu css a executar uma ação de foco sobre esse "p" específico, diga o seguinte:

(neste exemplo, forneci o "p" o "exemplo" ID)

#example
{
  cursor:default;
}

Agora, seu cursor permanecerá o mesmo em toda a página.

Hollnder
fonte
-1
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>
John
fonte
Não há necessidade de adicionar uma resposta separada para isso, seu comentário sobre a resposta de @KaranK é suficiente, pensou. Evite respostas duplicadas.
MAChitgarha