フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

要素全体をリンクにする方法

注意

以下に記すのは、liタグを使用した例です。
liだけではなく基本何でも行けるかと思います。

ふと思った疑問

<ul>
    <li><a href="#">Link</a></li>
</ul>

HTMLでこう打ったら、以下のような実行結果になることはお察しの通り。

でもこれって…
Aタグの部分だけしか反応しないのでは?

いつ役立つ?

例えば、CSSを以下のように指定している場合。

ul{
    width: 100%;
}

このとき、リスト(li)は画面の横幅いっぱいに表示されるが、リンク(a)はその幅のみになる。
そのため、リストをクリック(orタップ)したときにページ移動しない!

HTML Onlyでリンクにする

HTMLだけの場合は

<a href="#"><li>Link</li></a>

といった具合にaタグとliタグを逆にすればliタグ全体がリンクになる。

JavaScriptも使う

JavaScriptを使う場合、aタグがなくても可能になるので、
まずaタグを使用する場合を説明しますね。

// 全li取得
let lists = document.querySelectorAll('li');
for(let i=0;i<lists.length;i++){
    // 全liそれぞれに対する「クリックされたとき」の処理
    lists[i].addEventListener('click',function(){
        // クリックされたliの子要素 aタグのリンク先を取得
        let href = this.querySelector('a').getAttribute('href');
        // 現在のタブで開く
        location.href = href;
        // 新しいタブで開く
        // window.open(href);
    });

jQueryを使うと

$('li').click(function(){
    let href = $(this).children('a').attr('href');
    location.href = href;
    // window.open(href);
});

となります

aタグ不使用の例

HTML
<li href="#">aaa</li>
JS
// liのうち、href属性が指定されているものを取得
$('li[href]').click(function(){
    let href = $(this).attr('href');
    location.href = href;
    // window.open(href);
});

ちなみに属性が指定されていないとundefinedになりますのでそれで判別してもいいかも…
ただ行が長くなるのか…

使い分け

私は一番最後の、aタグを使わないものを使用しているのですが

  • JS使いたくない → 最初のもの
  • <li><a href="#">Link</a></li>を変えたくない → 真ん中のもの
  • aタグ打つの面倒くさい → 最後のもの

がいいかと思います。

[紹介元] CSSタグが付けられた新着投稿 – Qiita 要素全体をリンクにする方法

コメント

記事に戻る

コメントを残す