• web制作

【jQuery】ブロック要素全体をリンクにする

佐藤
このエントリーをはてなブックマークに追加

8月に入って増々暑くなってきましたね・・・。
今日から仙台七夕祭りがスタートのようですが、この暑さのせいでキツそうですね〜。
参加する方は水分とっておかないとダメですね!

地味に集めていたjQuery、今回は第2弾
div全体にリンクを貼付ける、です。

テキストだけじゃなく要素全体をリンクに!

aタグを使わずにブロック要素全体をリンクに設定します。
HTML5ならブロック要素の外側にリンクを置いても問題ないので、
今更使うことも少ないかも知れませんが・・・。

サンプルソース

とりあえずjQueryから

jQuery

今回も、あらかじめjQuery本体は読み込ませておいてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

次に下記スクリプトをhead部分に記述してください。
今回は割と簡単な作りですね。

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

.sampleでブロック要素を設定しているので、
この部分はお好に変更してください。

CSS

.sample{background:#CCC;
  		padding:20px; 
		margin-bottom:20px;
		cursor:pointer;
}

そのままだとマウスカーソルが変わらないので、
「cursor:pointer」でポインターに変えておきましょう。

HTML

<body>

<div class="sample">
div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。
div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。
</div>
<div class="sample">
div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。
div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。div全体がリンクになっています。
</div>

</body>

デモページ

以上です。
html5が主流になっている今となっては使いどころが
どれだけあるかどうか分かりませんが、一応覚えておこうと思いました。

では、また〜

rss登録
このエントリーをはてなブックマークに追加