DIVで囲んだ範囲をリンクするとテキストだけをリンクした時と比べ、リンクの範囲が大きくなり閲覧者の方がクリックしやすくなります。そんなリンクをjQuery版とHTML5版で作ってみました。
jQueryのスクリプトとサンプル
$(function(){
$('div').click(function() {
location.href = $(this).find('a').attr('href');
});
});
処理内容と説明
// div がクリックされたら{ }内の処理を行う
$('div').click(function() {
//findでdiv内のa要素を捜して、attrで取出したhrefに飛ばします。
location.href = $(this).find('a').attr('href');
hover の処理は、jQueryではなくCSSの擬似クラス:hoverを使って行っています。
HTML5で実装してみる
<a href="#ccc"> <div class="box_member"> <h3>DIVで囲んだ範囲をリンク</h3> <p>もっと読む</p> </div> </a>
HTML5の場合、ブロック要素全体を a タグで囲んでリンクが出来きるのでもっと簡単です。
xhtml でも出来ますが、HTMLの文法上問題があるので、ここではjQueryを使用しています。