아무래도 7note입니다. a 태그의 클릭 가능한 범위를 넓히는 방법에 대해.

jQuery는 무엇입니까? 라는 분은 여기 의 기사를 부디.

이번에는 jQuery에서 자작하는 방법과 HTML5만으로 쓰는 방법의 2 종류를 소개.

개발 환경

jQuery 버전 ⇒ 아마도 아무것도 OK

플러그인 등 ⇒ 이용 없음(자작)

무슨 일이야?

링크 영역을 확대. (div 요소에도 a 태그와 같은 움직임을 붙인다.)

출처

index.html

<div class="box biggerlink"> <!-- 任意のクラス名を付ける（例：biggerlink） -->
  <p>ココはpタグですよ。</p>
  <div><img src="sample.png"></div>
  <a href="https://www.google.com/">ここはaタグですよ。</a>
</div>

style.css

/* 装飾だけなので、CSSはなくてもOK */
.box {
  width: 300px;
  padding: 10px;
  background: #eeecda;
}

.box:hover {
  cursor: pointer;    /* ホバー時にカーソルを指👆の形に変更 */
}

.box p {
  background: #f08a5d;
}

.box a {
  color: #eeecda;
  background: #b83b5e;
}

script.js

$(function(){
  $(".biggerlink").click(function(){
    window.location = $(this).find("a").attr("href");
  });
});

사용법은 간단

자바 스크립트를 복사하고 사용하려는 요소에 biggerlink 클래스를 지정하기 만하면됩니다.
그 요소 안에 있는 a 태그의 끝 부분과 같습니다.

해설

script.js의 $(".biggerlink") 의 부분이 셀렉터를 지정하고 있으므로, biggerlink라고 하는 클래스명을 바꾸는 것으로, biggerlink 이외의 클래스에도 같은 처리를 넣을 수가 있습니다.

다음에 window.location 가 WEB 페이지의 표시처를 나타내는 것입니다.
그리고, $(this).find("a").attr("href"); 가 클릭된 요소 안에 있는 a 태그의 href 속성의 값을 나타내고 있으므로, 일본어로 고치면 「클릭된 요소(biggerlink)의 a 태그의 href의 링크처로 날아간다 '라는 명령이 됩니다.

다른 탭에서 열고 싶을 때

script.js를 다음과 같이 변경하십시오.

$(function(){
  $(".biggerlink").click(function(){
    /* 変更ここから */
    const url = $(this).find("a").attr("href");
    window.open(url, '_blank');
    /* 変更ここまで */
  });
});

사실 HTML5에서는 js를 사용하지 않아도 구현할 수 있다.

HTML5에서는 js를 사용하지 않고 인라인 요소(a) 안에 블록 요소(div)를 쓰는 것만으로 구현할 수 있습니다.

index.html

<a href="https://www.google.com/">
  <div class="box biggerlink">
    <p>ココはpタグですよ。</p>
    <div><img src="sample.png"></div>
  </div>
</a>

HTML5부터는 a 태그 안에 블록 요소를 넣어도 괜찮습니다. 보다는, 블록 요소·인라인 요소라고 하는 나누는 방법이 조금 낡은 사고방식이며, HTML5의 공식적인 기술로서는, 인터랙티브 컨텐트(Interactive content)마저 포함하지 않으면 a 태그안에는 어떤 태그를 써 도 좋다.

대화형 콘텐츠(Interactive content)
한마디로, 사용자가 뭔가의 입력이나 액션을 일으키는 것과 같은 요소.
⇒ "a audio* button details embed iframe img* input* keygen label menu* object* select textarea video*"※[*]는 조건부

요약

HTML5로 a 태그의 범위를 크게 할 수 있게 되었으므로, 솔직히 biggerlink의 js를 사용할 기회는 상당히 줄었습니다.
하지만 지식으로 알아두면 손해는 없을까 생각합니다!

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임