jQuery：リンクのクリック領域をブロック全体にする簡単なスクリプト
そうか、こんなスクリプトでもいいのかと気づいた時は、驚いたり感動したりするのですが、今回のスクリプトもそんな一つ。リンクのクリック領域を親要素全体に適応する方法なのですが、「そうか、こんな考え方もできるのか！」なんて思ってしまったスクリプトです。
ネタ元：Useful and Handy jQuery Tips and Tricks
今回使うHTML
<ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul>
単純にliをCSSでブロックに見せて作ったサンプルです。
同じウィンドウ内に開く
■スクリプト
$("div#test1 li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
■プレビュー
参考にしているサイトに載っていたスクリプトです。しかし、これだと同じウィンドウ内にだけしからならないので、別ウィンドウで開くようにかえてみます。
別ウィンドウで開く
■スクリプト
$("div#test2 li").click(function(){
window.open($(this).find("a").attr("href"), '_blank');
return false;
});
■プレビュー
attrでtargetをつけてもよかったのですが、今回はいつも利用しているwindow.openで作ってみました。
補足
今回のサンプルではliタグの中にあるaタグを開くように設定したのですが、aタグが複数存在するような場合には、スクリプトはもう一工夫必要になります。用途によって変化させてみてください。
関連エントリー：
<script>
jQuery(function($){
$('div.box').click(function(evt){
if(evt.target.tagName!='A')
$(this).find('a')[0].click();
})
})
</script>
<div class="box">
<a href="http://www.google.co.jp" target="_blank">google</a>
</div>
<div class="box">
<a href="http://www.yahoo.co.jp" target="_blank">yahoo</a>
</div>
ほうほう、なるほど。そういうやりかたもあるのですねー。
ブロックをクリックしたらアンカーをクリックしたことになるってことですな。
li a{
display:block;
}
でイイような気がする...
この投稿のプレビューで言うなら、a要素の文字のセンタリングは
a{
text-align:center;
height:100px;
line-height:100px;
}
てな感じにすればよろし。
通常であればおっしゃる通りCSSで十分です。
あくまでjQueryを使った場合の方法についての勉強ですので。
またこの方法は、たとえば画像とテキストがセットになっているリストで、さらにプログラムなどで自動的にそれがでてくるような場合でリンクエリアを広げたい場合とか、そういう場合は使える内容だと思われます。