5

Sempre tenho essa dúvida, olhem só:

Tenho um menu, com ul e li:

<ul>
  <li><a href="/inicio">Inicio</a></li>
  <li><a href="/sobre">Sobre</a></li>
  <li><a href="/contato">Contato</a></li>
</ul>

Como faço, pra que, quando eu posicionar ou clicar na li o link do a funcionar? Porque, por exemplo, só funciona se eu clicar no a, mas, se eu clicar fora, no caso, na li, não funciona, o link a não ativa.

4 Respostas 4

3

Tenta algo como:

$(document).on("click", "li", function() {
  window.location = $(this).find("a").attr("href");
});
ul {
  list-style: none;
}

li {
  width: 100px;
  background: gray;
  margin: 0 0 10px;
  cursor: pointer;
}

li:hover {
  background: yellow;
}

a {
  text-decoration: none;
  margin: 0 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="/inicio">Inicio</a></li>
  <li><a href="/sobre">Sobre</a></li>
  <li><a href="/contato">Contato</a></li>
</ul>

5
  • 1
    Esta resposta deveria ser marcada como a correta. 17/07/2017 às 12:47
  • Poderia explicar, Renan, a resposta do Evandro? Em diversos locais que procurei, me indicaram a fazer do modo dele. Porque se não, todo menu que eu for criar, eu terei que fazer um script. 17/07/2017 às 12:50
  • @LucasCarvalho a resposta do Mathias só precisa ser aplicada uma vez para todo o site, portanto não requer repetição. A resposta do Evandro não me parece a ideal porque acopla o comportamento da aplicação ao estilo dela. Você poderá introduzir um bug no seu sistema apenas mudando o CSS. 17/07/2017 às 16:17
  • Por exemplo, aqui no SOpt, no menu, a tag a está como inline-block, isso não é ideal no caso? 17/07/2017 às 16:20
  • 1
    @LucasCarvalho inline-block permite que você defina uma largura para tag "a" e ao mesmo tempo coloque um item ao lado do outro, a solução do SOpt está correta também, e ao meu ver nada disso altera o comportamento da aplicação como o Renan afirma, isso só muda o estilo, e se você rodar o site sem CSS os links vão funcionar normalmente, e o código será validado como correto em qualquer validador de HTML. Esse debate aqui prova que há várias maneiras para resolver o mesmo problema, algumas simples, outras mais complexas e alguma não recomendadas. Mas talvez só Sr. Tim Bernes Lee saiba a correta 17/07/2017 às 17:31
2

Se você definir no CSS

li a {
   display: block;
} 

A tag "A" passa a ter a mesma largura do "LI", consequentemente tudo fica com link.

5
  • 1
    Isso é um comportamento dependente de navegador, não? Fora o fato de mudar comportamento de aplicação através de seu estilo. 17/07/2017 às 12:46
  • @Renan isso deve funcionar em qualquer navegador, basicamente o display:block força o link a se comportar como uma div, que por padrão ocupa 100% da área disponível, sendo assim o mesmo tamanho para o link e para o item da lista. 17/07/2017 às 16:00
  • 1
    Eu vejo problemas na abordagem sugerida pelo @LINQ que inverte as tags. Mesmo sabendo que funciona, e que no HTML5 essas regras de DOM são mais liberais, não me parece o caminho ideal... 17/07/2017 às 16:02
  • Eu concordo que a resposta do @LINQ não é a ideal e já deixei comentário nela. Mas volto a dizer que esta resposta acopla a lógica ao estilo, o que é bizarro. Você muda o comportamento do seu código e pode gerar um bug apenas mudando o CSS. 17/07/2017 às 16:16
  • Dica fantástica, ajudou demais, obrigado. 17/02/2022 às 12:06
2

Eu acredito que utilizar JavaScript (e principalmente jQuery) para alterar o comportamento natural do elemento li também não é a melhor solução. Esse é um caso clássico de delegar uma função para um elemento que não é o mais indicado.

Qual é o impacto de se alterar o comportamento padrão de um elemento HTML?

Se o evento em questão redirecionará o usuário para outra página, este evento deve estar delegado ao elemento a e não ao elemento li. Implementar o segundo é quebrar a semântica do HTML. Agora, se a intenção é que o comportamento do elemento a seja aplicado em todo o elemento li, a solução mais clara é: fazer com que o elemento a ocupe todo o elemento li.

li {
  position: relative;
}

li > a {
  position: absolute;
  width: 100%;
  height: 100%;
}

a:hover {
  background: green;
}
<ul>
  <li><a href="/inicio">Inicio</a></li>
  <li><a href="/sobre">Sobre</a></li>
  <li><a href="/contato">Contato</a></li>
</ul>

Não fere a semântica do HTML e não utiliza JavaScript.

-2

A melhor forma é a junção de duas alternativas acima.

Coloque a âncora com height e widht de 100%, e display block.

Irá funcionar e não alterará a semântica do HTML.

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    18/11/2021 às 14:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .