Transforme uma div em um link

Eu tenho um <div>bloco com algum conteúdo visual sofisticado que não quero mudar. Quero torná-lo um link clicável.

Estou procurando algo como <a href="…"><div> … </div></a>, mas isso é válido XHTML 1.1.

Vim aqui na esperança de encontrar uma solução melhor que a minha, mas não gosto de nenhuma delas. Eu acho que alguns de vocês entenderam mal a pergunta. O OP quer fazer com que uma div cheia de conteúdo se comporte como um link. Um exemplo disso seria os anúncios do Facebook - se você olhar, eles são realmente uma marcação adequada.

Para mim, os nãos são: javascript (não deve ser necessário apenas para um link e SEO / acessibilidade muito ruins); HTML inválido.

Em essência, é isso:

• Crie seu painel usando técnicas normais de CSS e HTML válido.
• Em algum lugar, coloque um link que você deseja que seja o link padrão se o usuário clicar no painel (você também pode ter outros links).
• Dentro desse link, coloque uma tag de extensão vazia ( <span></span>, não <span />- obrigado @Campey)
• dê a posição do painel: relativa

• aplique o seguinte CSS ao intervalo vazio:

  { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
  
    z-index: 1;
  
    /* fixes overlap error in IE7/8, 
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }   

  Agora, ele cobre o painel e, como está dentro de uma <A>tag, é um link clicável

• forneça quaisquer outros links dentro da posição do painel: relativo e um índice z adequado (> 1) para colocá-los na frente do link de extensão padrão

Você não pode criar o divlink a, mas pode fazer com que uma <a>tag atue como a block, o mesmo comportamento que uma <div>.

a {
    display: block;
}

Você pode então definir a largura e a altura.

Esta é uma pergunta antiga, mas pensei em responder, já que todos aqui têm algumas soluções malucas. Na verdade, é muito, muito simples ...

Uma tag de âncora funciona assim -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

Embora eu não tenha certeza se isso é válido. Se esse é o raciocínio por trás das soluções faladas, peço desculpas ...

Requer um pouco de javascript. Mas, você divseria clicável.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

Esta opção não requer um empty.gif, como na resposta mais votada:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

Conforme proposto em http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Esta é uma solução "válida" para alcançar o que você deseja.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

Mas, provavelmente, o que você realmente deseja é ter uma <a>tag exibida como um elemento no nível do bloco.

Eu não recomendaria o uso de JavaScript para simular um hiperlink, pois isso derrota o objetivo da validação de marcação, que é, em última análise, promover a acessibilidade (publicar documentos bem formados seguindo regras semânticas apropriadas minimiza a possibilidade de o mesmo documento ser interpretado de maneira diferente por navegadores diferentes).

Seria preferível publicar uma página da web que não valida, mas é renderizada e funciona corretamente em todos os navegadores , incluindo aqueles com JavaScript desativado. Além disso, o uso onclicknão fornece as informações semânticas para um leitor de tela para determinar se o div está funcionando como um link.

A maneira mais limpa seria usar o jQuery com as tags de dados introduzidas no HTML. Com esta solução, você pode criar um link para cada tag que desejar. Primeiro defina a tag (por exemplo, div) com uma tag de link de dados:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Agora você pode estilizar a div da maneira que desejar. E você também deve criar o estilo para o comportamento semelhante ao "link":

[data-link] {
  cursor: pointer;
}

E, finalmente, coloque esta chamada do jQuery na página:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

Com esse código, o jQuery aplica um ouvinte de clique a cada tag na página que possui um atributo "link de dados" e redireciona para o URL que está no atributo de link de dados.

Não tenho certeza se isso é válido, mas funcionou para mim.

O código :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

Para que a resposta do funcionário funcione no IE 7 e para a frente, ele precisa de alguns ajustes.

1. O IE não respeitará o índice z se o elemento não tiver cor de plano de fundo; portanto, o link não sobreporá partes da div de contenção que possui conteúdo, apenas as partes em branco. Para corrigir isso, um plano de fundo é adicionado com opacidade 0.

2. Por alguma razão, o IE7 e vários modos de compatibilidade falham completamente ao usar o intervalo em uma abordagem de link. No entanto, se o próprio link receber o estilo, ele funcionará perfeitamente.

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

você também pode tentar enrolar uma âncora e depois girar sua altura e largura para que sejam iguais às de seu pai. Isso funciona para mim perfeitamente.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

Por que não? use <a href="bla"> <div></div> </a>funciona bem em HTML5

Esta postagem é antiga, eu sei, mas só tive que corrigir o mesmo problema, porque simplesmente escrever uma tag de link normal com a exibição configurada para bloquear não torna toda a div clicável no IE. portanto, para corrigir esse problema muito mais simples do que precisar usar o JQuery.

Em primeiro lugar, vamos entender por que isso acontece: o IE não tornará uma div vazia clicável, apenas tornará o texto / imagem dessa div / tag clicável.

Solução: preencha a div com uma imagem de fundo e oculte-a do visualizador.

Quão? Você faz boas perguntas, agora ouça. adicione esse estilo de backround à tag a

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

E aí está, toda a div agora é clicável. Essa foi a melhor maneira para mim, porque estou usando-a na minha Galeria de fotos para permitir que o usuário clique em metade da imagem para mover para a esquerda / direita e, em seguida, coloque uma imagem pequena apenas para efeitos visuais. então, para mim, usei as imagens esquerda e direita como imagem de fundo!

Basta ter o link no bloco e aprimorá-lo com jquery. Degrada 100% normalmente para qualquer pessoa sem javascript. Fazer isso com html não é realmente a melhor solução para imho. Por exemplo:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Em seguida, use jquery para tornar o bloco clicável (via parede do web designer ):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

Então tudo que você precisa fazer é adicionar estilos de cursor à div

    #div_link:hover {cursor: pointer;}

Para pontos de bônus, aplique esses estilos somente se o javascript estiver ativado, adicionando uma classe 'js_enabled' à div, ao corpo ou a qualquer outra coisa.

Este exemplo funcionou para mim:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

Isso funcionou para mim:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

Isso adiciona um elemento invisível (a extensão), que cobre toda a sua div e está acima toda a sua div no índice z; portanto, quando alguém clica nessa div, o clique é essencialmente interceptado pela camada invisível de "extensão", que é ligado.

Nota: Se você já estiver usando índices z para outros elementos, certifique-se de que o valor desse índice z seja mais alto do que qualquer coisa que você queira que fique "em cima".

Na verdade, você precisa incluir o código JavaScript no momento, verifique este tutorial para fazer isso.

mas há uma maneira complicada de conseguir isso usando um código CSS. Você deve aninhar uma tag de âncora dentro da tag div e aplicar essa propriedade a ela,

display:block;

quando você fizer isso, fará com que toda a área da largura seja clicável (mas dentro da altura da tag de âncora), se você quiser cobrir toda a área div, deverá definir a altura da tag de âncora exatamente para a altura da tag div, por exemplo:

height:60px;

isso tornará a área inteira clicável, então você poderá aplicar text-indent:-9999px a tag anchor para atingir a meta.

isso é realmente complicado e simples e foi criado usando o código CSS.

Aqui está um exemplo : http://jsfiddle.net/hbirjand/RG8wW/

Essa é a melhor maneira de fazer isso, conforme usado no site da BBC e no Guardian:

Encontrei a técnica aqui: http://codepen.io/IschaGast/pen/Qjxpxo

aqui está o html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

aqui está o CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></a>

Este trabalho para mim:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

Você pode fornecer um link para sua div seguindo o método:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

Você pode envolver o elemento com tags href ou usar jquery e usar

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

Esta é a maneira mais simples.

Digamos, este é o divbloco que eu quero tornar clicável:

<div class="inner_headL"></div>

Então href, faça o seguinte:

<a href="#">
 <div class="inner_headL"></div>
</a>

Apenas considere o divbloco como um elemento html normal e ative a hreftag usual .
Funciona no FF pelo menos.

Embora eu não recomendo fazer isso sob nenhuma circunstância, aqui está um código que transforma um DIV em um link (nota: este exemplo usa jQuery e determinadas marcações são removidas por simplicidade):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

Uma opção que não foi mencionada está usando o flex. Ao aplicar flex: 1à atag, ela se expande para caber no contêiner.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

Eu puxei uma variável porque alguns valores no meu link mudarão dependendo do registro do qual o usuário está vindo. Isso funcionou para testar:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

e isso também funciona:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

Minhas calças espertas respondem:

"Resposta evasiva a:" Como tornar um elemento de nível de bloco um hiperlink e validar no XHTML 1.1 "

Apenas use HTML5 DOCTYPE DTD. "

Na verdade, não é verdade para ie7

onclick="location.href='page.html';"

Funciona IE7-9, Chrome, Safari, Firefox,

se tudo pudesse ser assim tão simples ...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

pense um pouco fora da caixa ;-)