THE HAM MEDIA BLOG

jQuery:リンクのクリック領域をブロック全体にする簡単なスクリプト

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
BLOCK
Link
jquery

リンクのクリック領域をブロック全体にするスクリプト

そうか、こんなスクリプトでもいいのかと気づいた時は、驚いたり感動したりするのですが、今回のスクリプトもそんな一つ。リンクのクリック領域を親要素全体に適応する方法なのですが、「そうか、こんな考え方もできるのか!」なんて思ってしまったスクリプトです。

今回使う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タグが複数存在するような場合には、スクリプトはもう一工夫必要になります。用途によって変化させてみてください。

この記事へのコメント
aタグ複数..は解決できませんが、こう書けばクリック後の挙動を script で意識する必要がなくなるかと...


<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>

Posted by cyokodog at 2009年04月01日
>cyokodogさん
ほうほう、なるほど。そういうやりかたもあるのですねー。
ブロックをクリックしたらアンカーをクリックしたことになるってことですな。
Posted by ハム at 2009年04月01日
CSSでよほどイジられた要素でない限り
li a{
display:block;
}
でイイような気がする...
この投稿のプレビューで言うなら、a要素の文字のセンタリングは
a{
text-align:center;
height:100px;
line-height:100px;
}
てな感じにすればよろし。
Posted by y@s at 2009年05月15日
>y@sさん
通常であればおっしゃる通りCSSで十分です。
あくまでjQueryを使った場合の方法についての勉強ですので。

またこの方法は、たとえば画像とテキストがセットになっているリストで、さらにプログラムなどで自動的にそれがでてくるような場合でリンクエリアを広げたい場合とか、そういう場合は使える内容だと思われます。
Posted by ハム at 2009年05月16日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。