大枠のブロック要素全体に子要素のリンクを適用させるjQueryがあります

リンク web制作

子要素のaタグに設定したリンクを、親要素のブロック全体にも設定できると便利ですよね。

例えばブログでいうと、記事一覧のエントリーカードの全体をリンク化したいときなんかに使えます。

一見とても大変そうですが、jQueryを使えば超簡単に設定できるんですよ。

スポンサーリンク

大枠のブロック要素全体にリンクを設定する方法

それでは、手順を3つに分けてみていきましょう。たったの3ステップで設定完了!

1、ヘッダーよりjQueryを読み込み

まずはjQueryを使うための準備。

これをHTMLのヘッダー内に記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

2、JavaScriptを記述

こちらがJavaScriptのコードです。

基本的には「対象ブロックのセレクタ」の部分を自分の環境に合わせるだけでOK。

<script type="text/javascript">

$(function(){
   $('対象ブロックのセレクタ').click(function(){
      window.location=$(this).find('a').attr('href');
      return false;
   });
});

</script>

仕組み(プログラムの流れ)を大まかに言うとこんな感じです。

  1. 対象のセレクタをクリック
  2. 対象セレクタ内のaタグを探す
  3. 対象セレクタにaタグの属性(url)を追記する
  4. リンク先に移動

 

ちょっと、簡単な例を見てみましょうか。こんなHTMLがあったとします。

<div id="box">
   対称ブロックの要素全体にリンクを設定する方法は<a href="#">こちら</a>です。
</div>

 

この場合は、「対象ブロックのセレクタ」=「#box」ということになりますね。

大枠のブロックである「div(#box)」をクリックしたとき、「こちら」に設定してあるリンク先に移動することになります。

3、CSSでマウスポインタを変更

上記の手順により、大枠のdivをクリックすればリンク先に移動するようになりました。

しかし、クリックするまではあくまでただのdivタグ。マウスポインタはリンクを示す指のマークにはなりません。これではユーザーに伝わらない。

 

ですからCSSによりdivに乗ったらマウスポインタが変更されるような設定が必要です。

それがこちら。

#box{
   corsor:pointer;
}

これにより、マウスオーバー時にポインタが切り替わります。簡単ですね。

最後に

これで完了。超簡単ですね。

HTMLを作る際に、あらかじめaタグで囲っておけば全く必要ないんですが、意外とそうもいかないことがあるんですよね。

すでにHTMLが出来上がってしまってるものとか直すの面倒ですし。意外に使い道があると思います。