1

Tenho um sistema onde preciso criar um link clicável href dentro de uma div que também é clicável.

Em resumo queria saber se existe alguma forma de criar um "link clicável B" dentro de um "link clicável A". Sendo que o "link interno B" tenha seu clique independente do 'link A".

EX:

<a href="LINK_A">   <a href="LINK_B">Conteúdo do 2º link</a>   </a>
1
  • funciona <a href=https://pt.stackoverflow.com/questions/294961/retorno-de-funcao>retorno-de-funcao <a href=https://pt.stackoverflow.com/unanswered>unanswered</a></a>
    – user60252
    Commented 29/04/2018 às 18:04

3 Respostas 3

1

Infelizmente, não é possível. Colocar um anchor dentro de outro é contra a especificação:

12.2.2 Links aninhados são ilegais

Link e anchor definidos pelo elemento A não devem ser aninhados; um elemento A não deve conter outros elementos A. (tradução livre)

Você poderá, no máximo, colocá-los lado a lado, na mesma hierarquia.

1

Vou da um resposta que eu não te recomendo fazer. Mas ela pode resolver o seu problema em último caso.

Vc pode colocar um <object> dentro do seu <a> e partir dai construir seu menu. Assim vc consegue fazer um hake e colocar um link dentro do outro.

Mas antes veja que segundo as normas da W3C isso não deve ser feito: http://w3c.github.io/html/single-page.html#the-a-element

Mas se quiser fazer mesmo assim isso deve resolver seu problema. Mais uma vez não recomendo, mas fica como uma referência.

OBS: os links não funcionam dentro do Snippet, mas na sua página vai dar certo...

#menuHomeMaster {
    display: inline-block;
    width: 150px;
    height: 20px;
    overflow: hidden;
    transition: height 300ms ease;
}
#menuHomeMaster:hover {
    height: 60px;
}
object {
    display: inline-block;
    width: 150px;
}
a object a:hover {
    font-weight: bold;
}
a:hover {
    color: green;
}
<a  href="https://pt.stackoverflow.com"  id="menuHomeMaster" target="_blank">Denúncia/Sugestão
    <object><a href="http://www.uol.com.br/" class="" target="_blank">link 1</a></object>
    <object><a href="http://www.globo.com.br/" class="" target="_blank">link 2</a></object>
</a>

Uma fonte de referência para esse caso: https://stackoverflow.com/questions/9882916/are-you-allowed-to-nest-a-link-inside-of-a-link

0

Como já foi dito, não é recomendável usar a tag <a> desta maneira, mas dá uma olhada nesse Fiddle se quiser usar assim:

https://jsfiddle.net/gyurjf5k/

Dá pra chegar no resultado que você precisa usando preventDefault() e depois abrindo o link que você deseja.

document.querySelectorAll('a.clique').forEach(i => {

  i.addEventListener('click', ev => {

        ev.preventDefault();

    window.open(ev.currentTarget.getAttribute('href'), 'janela');

   //No seu código, em vez de window.open, 
   //você pode usar location.href = ev.currentTarget.getAttribute('href')  

  })

});

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 .