JavaScript없이 HTML과 CSS에서 클릭 가능한 전체 'div'를 만드는 방법은 무엇입니까?

JavaScript없이 HTML과 CSS에서 클릭 가능한 전체 'div'를 만드는 방법은 무엇입니까? [복제]

---

이 질문에는 이미 답변이 있습니다.

• 링크로 div 만들기 26 답변

JavaScript없이 유효한 코드 / 마크 업으로 클릭하면 전체 div가 클릭 가능하고 다른 페이지로 연결되도록하고 싶습니다.

이것이 내가 결과를 원하는 것이라면-

<a href="#">
<div>This is a link</div>
</a>

W3C 유효성 검사기는 블록 요소를 인라인 요소 안에 배치해서는 안된다고 말합니다. 더 좋은 방법이 있습니까?

---

자바 스크립트없이 유효한 코드로 클릭하면 전체 div가 다른 페이지에 연결됩니다. 가능합니까?

Pedantic answer : 아닙니다.

이미 다른 의견을 달았으므로 태그 div안에 중첩하는 것은 유효하지 않습니다 a.

그러나 a태그 div와 다른 블록 태그를 중첩 할 수 없다는 점을 제외하고 태그와 매우 유사하게 동작 하는 것을 막을 수있는 것은 없습니다. 마크 업에 적합하면 태그에 설정 display:block하고 원하는대로 a크기 / 부동하십시오.

다른 사람들이 우리가 지적했듯이 자바 스크립트를 피해야한다는 질문의 전제를 다시 생각한다면 onClick 이벤트 핸들러를 사용할 수 있습니다. jQuery는이 작업을 쉽고 유지 관리하기 쉽도록 널리 사용됩니다.

---

링크를 전체 div에 채우면 div를 클릭 가능하게 만드는 것처럼 보일 수 있습니다.

CSS :

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML :

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>

---

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

---

JS가 없으면 다음과 같이하고 있습니다.

내 HTML :

<div class="container">
  <div class="sometext">Some text here</div>
  <div class="someothertext">Some other text here</div>
  <a href="#" class="mylink">text of my link</a>
</div>

내 CSS :

.container{
  position: relative;
}

.container.a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; //these two lines are to hide my actual link text.
  overflow: hidden; //these two lines are to hide my actual link text.
}

---

JavaScript / 이미지가없는 내 솔루션. CSS 만 사용되었습니다. 모든 브라우저에서 작동합니다.

HTML :

<a class="add_to_cart" href="https://www.redracingparts.com" title="Add to Cart!">
  buy now<br />free shipping<br />no further costs
</a>

CSS :

.add_to_cart:hover {
  background-color:#FF9933;
  text-decoration:none;
  color:#FFFFFF;
}

.add_to_cart {
  cursor:pointer;
  background-color:#EC5500;
  display:block;
  text-align:center;
  margin-top:8px;
  width:90px;
  height:31px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#E70000;
}

There is an example on https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php

---

Nesting block level elements in anchors is not invalid anymore in HTML5. See http://html5doctor.com/block-level-links-in-html-5/ and http://www.w3.org/TR/html5/the-a-element.html. I'm not saying you should use it, but in HTML5 it's fine to use <a href="#"><div></div></a>.

The accepted answer is otherwise the best one. Using JavaScript like others suggested is also bad because it would make the "link" inaccessible (to users without JavaScript, which includes search engines and others).

---

jQuery would allow you to do that.

Look up the click() function: http://api.jquery.com/click/

Example:

$('#yourDIV').click(function() {
  alert('You clicked the DIV.');
});

---

Well you could either add <a></a> tags and place the div inside it, adding an href if you want the div to act as a link. Or else just use Javascript and define an 'OnClick' function. But from the limited information provided, it's a bit hard to determine what the context of your problem is.

---

.clickable {
  cursor:pointer;
}

---

Something like this?

<div onclick="alert('test');">

</div>

---

AFAIK you will need at least a little bit of JavaScript...

I would suggest to use jQuery.

You can include this library in one line. And then you can access your div with

$('div').click(function(){
  // do stuff here
});

and respond to the click event.

---

we are using like this

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
    </div>
</label>
   <label for="2"> 
<div class="options">
 <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

using

  <label for="1">

tag and catching is with

id=1

hope this helps.

참고URL : https://stackoverflow.com/questions/8160494/how-to-make-a-whole-div-clickable-in-html-and-css-without-javascript