子要素のaタグに設定したリンクを、親要素のブロック全体にも設定できると便利ですよね。
例えばブログでいうと、記事一覧のエントリーカードの全体をリンク化したいときなんかに使えます。
一見とても大変そうですが、jQueryを使えば超簡単に設定できるんですよ。
大枠のブロック要素全体にリンクを設定する方法
それでは、手順を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>仕組み（プログラムの流れ）を大まかに言うとこんな感じです。
- 対象のセレクタをクリック
- 対象セレクタ内のaタグを探す
- 対象セレクタにaタグの属性（url）を追記する
- リンク先に移動
ちょっと、簡単な例を見てみましょうか。こんなHTMLがあったとします。
<div id="box">
対称ブロックの要素全体にリンクを設定する方法は<a href="#">こちら</a>です。
</div>
この場合は、「対象ブロックのセレクタ」＝「#box」ということになりますね。
大枠のブロックである「div（#box）」をクリックしたとき、「こちら」に設定してあるリンク先に移動することになります。
3、CSSでマウスポインタを変更
上記の手順により、大枠のdivをクリックすればリンク先に移動するようになりました。
しかし、クリックするまではあくまでただのdivタグ。マウスポインタはリンクを示す指のマークにはなりません。これではユーザーに伝わらない。
ですからCSSによりdivに乗ったらマウスポインタが変更されるような設定が必要です。
それがこちら。
#box{
corsor:pointer;
}これにより、マウスオーバー時にポインタが切り替わります。簡単ですね。
最後に
これで完了。超簡単ですね。
HTMLを作る際に、あらかじめaタグで囲っておけば全く必要ないんですが、意外とそうもいかないことがあるんですよね。
すでにHTMLが出来上がってしまってるものとか直すの面倒ですし。意外に使い道があると思います。
