jqueryを使ってdiv要素のボックスをリンクにしてみたいと思います。最近のブログではよく使われている？のかもしれません。いずれlogwでも使いたいと思います。

HTMLコード

以下のようなコーどがあったとします。

<aritcle><!-- aritcle_start -->
<div class="post"><!-- post_start -->
<h2 class="title"><a href="#">記事タイトル</a></h2>
<div class="blog_info"><!-- blog_info_start -->
<ul>
<li class="calendar">2013.1.1</li>
</ul>
</div><!-- blog_info_end -->
<h3>見出し3<br /><span>ああああああああああああ</span></h3>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>

<p><a href="#" class="read_more">続きを読む&#9758;</a></p>
</div><!-- post_end -->
</aritcle><!-- aritcle_end -->

このコードのdivボックス(post)をリンクにしてみたいと思います。

jQueryコード

jQueryのコードを以下のようにします。

<script type="text/javascript">
$(function(){
     $(".post").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
});
</script>

事前にjQueryファイルを読み込んでおいてください。

CSS変更

背景を変わるようにCSSをちょっとだけ変更します。

aritcle .post:hover{
background-color:#FCFCFC;
cursor:pointer;
}

これでdivのボックスがリンクになります。是非試してみてください。