【初心者でもわかる】jQueryを使って、aタグを含むdivをクリックしてもリンクさせる方法（biggerlink）

7892 ワード
フロント Web JavaScript jQuery HTML5 JavaScript テキストリンク

どうも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");
  });
});

使い方は簡単

javascriptをコピペして、使いたいところの要素に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タグの中にブロック要素を入れてもOKになりました。というよりは、ブロック要素・インライン要素という分け方が少し古い考え方であり、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制作のちょいテク詰め合わせ