ProgramingTip

HTML- 전체 DIV를 하이퍼 링크로 만드는 방법은 무엇입니까?

bestdevel 2020. 11. 3. 08:24
반응형

HTML- 전체 DIV를 하이퍼 링크로 만드는 방법은 무엇입니까?


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

전체 DIV를 클릭 가능한 하이퍼 링크로 만들려면 어떻게 할 수 있습니까? 의미, 나는 본질적으로하고 싶다 :

<div class="myclass" href="example.com">
    <div>...</div>
    <table><tr>..</tr></table>
    ....
</div>

그리고 누군가가 myclass를 마우스로 가리킬 때마다 DIV전체 DIV가 클릭 가능한 하이퍼 링크가 되기를 원합니다 .


onclick for JavaScript를 div에 추가 할 수 있습니다.

<div onclick="location.href='newurl.html';">&nbsp;</div>

편집 : 새 창

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>

당신은 넣을 수 있습니다 <a>내부 요소를 <div>과로 설정 display: block하고 height: 100%.


이제 포인터가 표준 커서를 손이 아닌 포인터로 지정하면됩니다. 여기에 예제 페이지 코드가 있습니다.

<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>

및 예제 CSS :

#smallbox {
    cursor: pointer;
}

따라서 div는 이제 'onclick'을 사용하여 클릭 가능한 요소이며 CSS를 사용하여 손 모양 커서를 조작했습니다. 작업이 완료되었습니다.


이것은 늦은 답변이지만이 질문은 검색 결과에 많이 대답 있습니다.

기본적으로 div를 클릭 가능하게 만들려고하는 것이 아니라 <a>태그에 display: blockCSS 속성 을 제공하여 앵커 div와 같은 모양으로 합니다.

이렇게하면 HTML이 의미 상 유효하며 하이퍼 링크에 대한 브라우저 동작을 상속 할 수 있습니다. 자바 프로그램이 있고 있어도 / js 리소스가로드되지 않는 경우에도 작동합니다.


태그 에을 추가 onclick하십시오 DIV.

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/


그냥 이러지 그래

<a href="yoururl.html"><div>...</div></a>

잘 작동하고 "클릭 가능한 항목"이라고 언급 한 솔루션 수행 할 수 없습니다.


대안은 자바 펼쳐와 onclick 이벤트를 전달입니다.

<div onclick="window.location.href='somewhere...';">...</div>

참고 URL : https://stackoverflow.com/questions/2188272/html-how-to-make-an-entire-div-a-hyperlink

반응형