THE HAM MEDIA BLOG

jQuery:リンクのクリック領域をブロック全体にする方法

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

リンクのクリック領域をブロック全体にする方法

jQueryのプラグインで「BigTarget.js」というのがあるが、
このプラグインのように、リンクのクリックできる領域を
ブロック全体にすることを、自作できないかなーと考えたてみた。

プラグインの簡易版みたいなソースになってしまったが、
シンプルに使えそうなので紹介しておきます。



サンプル

今回は例として、ブロック要素ではないですが、
リンクを含むリストを代用として使ってみます。

■HTMLソース

<ul>
<li><a href="#">全体がリンク</a></li>
<li><a href="#">全体がリンク</a></li>
<li><a href="#">全体がリンク</a></li>
</ul>

<li>のすぐ内側に<a>がある場合の例です。

■Script

$('li a').each(function(){
  var Href = $(this).attr('href');
  $(this).parent().click(function() {
    window.open(Href,'_blank');
    eturn false;
  });
});

<a>にとっての親要素をクリックしても、
リンク先を開きますよーというスクリプトになっています。

■プレビュー

上のサンプルでは、<li>のCSSに"display:block"やwidtを設定してある。

マウスホバー時の工夫もしておく

それと、このままではマウスが矢印のままでクリックできるかわかりづらいので、
CSSで"cursor: pointer;"というのも設定しておくと良い。
また、マウスホバー時に背景の色を変えたりするなど工夫をすると
より効果的に利用ができると思われる。
上のサンプルでもそのような設定をしてあって、
CSSだけで"li:hover"で設定してもいいのだが、それだとIEで使えないので
jQueryで一緒に設定するのが簡単かと思う。

$('li').hover(function(){
    $(this).css({backgroundColor:'#cccccc'});
  },function(){
    $(this).css({backgroundColor:'#ffffff'});
  });

同じウインドウで開くには?

先ほどの例だと、リンクが必ず別ウィンドウで開いてしまうが、
同じウィンドウで開く方法もある。その場合は、
window.open(Href,'_blank');の部分を
window.open(Href,'_self');とすればよい。

<a>がさらに入れ子になっている時は?

今回の例では、ブロックのすぐ内側に<a>があるが
さらに1階層深くなっている場合はどうするべきか。
例えば"<div><p><a></a></p></div>"
となっていて、divに対して今回の例を適応したい場合は、
$(this).parent().click(function() の部分を
$(this).parent().parent().click(function() のように
<a>の親要素の親要素のようにすることで対応できる。



この記事へのコメント
コメントを書く
お名前: [必須入力]

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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