div를 링크로 만들기

<div>변경하고 싶지 않은 멋진 시각적 콘텐츠 가 포함 된 블록이 있습니다. 클릭 가능한 링크로 만들고 싶습니다.

와 같은 것을 찾고 <a href="…"><div> … </div></a>있지만 유효한 XHTML 1.1입니다.

더 나은 솔루션을 찾기 위해 여기에 왔지만 여기서 제공하는 솔루션은 마음에 들지 않습니다. 나는 당신 중 일부가 그 질문을 오해했다고 생각합니다. 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)를 기본 스팬 링크 앞에 가져 오십시오.

div링크 자체를 만들 수는 없지만 <a>태그 block가 같은 동작으로 작동하도록 할 수 <div>있습니다.

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클릭 할 수 있습니다.

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

이 옵션에는 가장 많이 답한 답변과 같이 empty.gif가 필요하지 않습니다.

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

http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/ 에서 제안한대로

이것은 원하는 것을 달성하기위한 "유효한"솔루션입니다.

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

그러나 가장 원하는 것은 <a>태그를 블록 레벨 요소로 표시하는 것입니다.

자바 스크립트를 사용하여 하이퍼 링크를 시뮬레이트하는 것은 권장하지 않습니다. 마크 업 유효성 검사의 목적을 상실하기 때문에 궁극적으로는 접근성을 향상시킵니다 (적절한 의미 규칙에 따라 올바른 형식의 문서를 게시하면 동일한 문서가 다른 브라우저에서 다르게 해석 될 가능성이 최소화됩니다).

JavaScript를 사용 하지 않는 브라우저 를 포함하여 모든 브라우저 에서 유효성을 검사하지는 않지만 렌더링 및 작동 하는 웹 페이지를 게시하는 것이 좋습니다 . 또한을 사용 onclick하면 div가 링크로 작동하고 있음을 판별하기 위해 화면 판독기에 의미 정보를 제공하지 않습니다.

가장 깨끗한 방법은 jQuery를 HTML에 도입 된 데이터 태그와 함께 사용하는 것입니다. 이 솔루션을 사용하면 원하는 모든 태그에 대한 링크를 만들 수 있습니다. 먼저 데이터 링크 태그로 태그 (예 : div)를 정의하십시오.

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

이제 원하는 div 스타일을 지정할 수 있습니다. 그리고 "link"와 같은 동작을위한 스타일을 만들어야합니다 :

[data-link] {
  cursor: pointer;
}

그리고 마지막 으로이 jQuery 호출을 페이지에 넣으십시오.

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

이 코드를 사용하면 jQuery는 "데이터 링크"속성이있는 페이지의 모든 태그에 클릭 리스너를 적용하고 데이터 링크 속성에있는 URL로 리디렉션합니다.

이것이 유효한지 확실하지 않지만 그것은 나를 위해 일했습니다.

코드 :

<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>

IE 7 이상에서 동료의 답변을 작동 시키려면 약간의 조정이 필요합니다.

1. 요소에 배경색이 없으면 IE는 z- 색인을 무시하지 않으므로 링크는 내용이있는 포함 div의 일부와 겹치지 않으며 빈 부분 만 겹칩니다. 이 문제를 해결하기 위해 불투명도가 0 인 배경이 추가됩니다.

2. 어떤 이유로 IE7 및 다양한 호환성 모드는 링크 방식에서 범위를 사용할 때 완전히 실패합니다. 그러나 링크 자체에 스타일이 지정되어 있으면 정상적으로 작동합니다.

.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>

앵커를 감싼 다음 높이와 너비를 부모와 동일하게 설정하여 시도 할 수도 있습니다. 이것은 나를 위해 완벽하게 작동합니다.

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

왜 안돼? use <a href="bla"> <div></div> </a>HTML5에서 잘 작동합니다

이 게시물은 내가 아는 것이지만 블록으로 설정된 디스플레이로 일반 링크 태그를 작성하면 IE에서 전체 div를 클릭 할 수 없기 때문에 동일한 문제를 해결해야했습니다. 이 문제를 해결하려면 JQuery를 사용하는 것보다 훨씬 간단합니다.

먼저 왜 이런 일이 발생하는지 이해하십시오 .IE는 빈 div를 클릭 가능하게 만들지 않고 해당 div / 태그 내의 텍스트 / 이미지 만 클릭 가능하게 만듭니다.

해결책 : bakground 이미지로 div를 채우고 뷰어에서 숨기십시오.

어떻게? 좋은 질문을하고 이제 잘 들어 이 backround 스타일을 태그에 추가하십시오

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

그리고 이제 전체 div를 클릭 할 수 있습니다. 이것은 내 사진 갤러리에 이미지를 사용하여 사용자가 이미지의 절반을 클릭하여 왼쪽 / 오른쪽으로 이동 한 다음 시각적 효과를 위해 작은 이미지를 배치 할 수있게하는 가장 좋은 방법이었습니다. 그래서 나는 좌우 이미지를 배경 이미지로 사용했습니다!

블록에 링크가 있고 jquery로 강화하십시오. 자바 스크립트가없는 사람에게는 100 % 정상적으로 저하됩니다. html로 이것을하는 것이 실제로 가장 좋은 해결책은 아닙니다. 예를 들면 다음과 같습니다.

<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>

그런 다음 jquery를 사용하여 ( 웹 디자이너 wall을 통해) 블록을 클릭 가능하게 만드십시오 .

$(document).ready(function(){

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

});

그런 다음 커서 스타일을 div에 추가하기 만하면됩니다.

    #div_link:hover {cursor: pointer;}

보너스 포인트의 경우 div, 본문 또는 기타에 'js_enabled'클래스를 추가하여 자바 스크립트가 활성화 된 경우에만이 스타일을 적용하십시오.

이 예제는 저에게 효과적이었습니다.

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

이것은 나를 위해 일했다 :

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;
}

이렇게하면 전체 div를 덮고 z- 인덱스에서 전체 div 위에 있는 보이지 않는 요소 (스팬)가 추가 되므로 누군가 해당 div를 클릭하면 보이지 않는 "스팬"레이어가 클릭을 가로 채게됩니다. 연결되어 있습니다.

참고 : 이미 다른 요소에 z- 색인을 사용중인 경우이 z- 색인의 값이 "상단"으로 유지하려는 값보다 높은지 확인하십시오.

실제로 현재 JavaScript 코드를 포함해야합니다 . 이 자습서 를 확인하십시오 .

그러나 CSS 코드를 사용 하여이 작업을 수행하는 까다로운 방법이 있습니다 .div 태그 안에 앵커 태그를 중첩 하고이 속성을 적용해야합니다.

display:block;

그렇게하면 전체 너비 영역을 클릭 가능하게 만들 수 있지만 앵커 태그의 높이 내에서 전체 div 영역을 덮으려면 앵커 태그의 높이를 정확히 div 태그는 다음과 같습니다.

height:60px;

이렇게하면 전체 영역을 클릭 할 수있게 text-indent:-9999px되고 목표를 달성하기 위해 앵커 태그에 적용 할 수 있습니다 .

이것은 정말 까다 롭고 간단하며 CSS 코드를 사용하여 만들어졌습니다.

여기입니다 예 : http://jsfiddle.net/hbirjand/RG8wW/

BBC 웹 사이트 및 Guardian에서 사용하는 가장 좋은 방법입니다.

나는 여기에서 기술을 발견했다 : http://codepen.io/IschaGast/pen/Qjxpxo

여기 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>

여기 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>

이것은 나를 위해 작동합니다 :

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

다음 방법으로 div에 대한 링크를 제공 할 수 있습니다.

<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>

href 태그로 요소를 둘러싸거나 jquery를 사용하고 사용할 수 있습니다

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

이것이 가장 간단한 방법입니다.

말, 이것은이다 div내가 클릭 만들고 싶어 블록 :

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

따라서 href다음과 같이 입력하십시오.

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

div블록을 일반적인 html 요소로 생각하고 일반적인 href태그를 활성화하십시오 .
적어도 FF에서 작동합니다.

어떤 상황 에서도이 작업을 수행하지 않는 것이 좋지만 DIV를 링크로 만드는 코드가 있습니다 (참고 :이 예제는 jQuery를 사용하고 단순성을 위해 특정 마크 업이 제거되었습니다).

<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>

언급되지 않은 옵션은 flex를 사용하는 것입니다. 적용하여 flex: 1받는 사람 a태그는 컨테이너에 맞게 확장합니다.

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

a {
  flex: 1;
}

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

내 링크의 일부 값이 사용자가 어떤 레코드에서 왔는지에 따라 변경되므로 변수를 가져 왔습니다. 이것은 테스트를 위해 일했습니다.

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

그리고 이것은 작동합니다 :

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

내 똑똑한 바지가 대답합니다.

"완벽한 답변 :"블록 레벨 요소를 하이퍼 링크로 만들고 XHTML 1.1에서 유효성을 검사하는 방법 "

HTML5 DOCTYPE DTD 만 사용하십시오. "

실제로는 ie7에 맞지 않았습니다.

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

IE7-9, Chrome, Safari, Firefox,

모든 것이 간단 할 수 있다면 ...

#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>

상자 밖에서 조금 생각하십시오 ;-)