더 나은 솔루션을 찾기 위해 여기에 왔지만 여기서 제공하는 솔루션은 마음에 들지 않습니다. 나는 당신 중 일부가 그 질문을 오해했다고 생각합니다. OP는 콘텐츠로 가득 찬 div를 링크처럼 동작 시키려고합니다. 페이스 북 광고를 예로들 수 있습니다. 보시면 실제로 올바른 마크 업입니다.

나를 위해 no-nos는 다음과 같습니다 : javascript (링크에 필요하지 않으며 SEO / 접근성이 매우 좋지 않습니다); 잘못된 HTML.

본질적으로 이것은 다음과 같습니다.

• 일반적인 CSS 기술과 유효한 HTML을 사용하여 패널을 만드십시오.
• 어딘가에 사용자가 패널을 클릭하면 기본 링크가 될 링크를 넣으십시오 (다른 링크도 가질 수 있음).
• 해당 링크 안에 빈 스팬 태그를 넣으십시오 ( <span></span>, not <span />-thanks @Campey)
• 패널 위치를 제공하십시오 : 상대

• 빈 스팬에 다음 CSS를 적용하십시오.

  {
    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');
  }   

  이제 패널을 덮고 <A>태그 안에 있으므로 클릭 가능한 링크입니다.

• 패널 위치 내부에 다른 링크를 제공하십시오 : 상대 및 적절한 z- 인덱스 (> 1)를 기본 스팬 링크 앞에 가져 오십시오.

답변

a {
    display: block;
}

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

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

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

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

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

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

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

[data-link] {
  cursor: pointer;
}

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