THE HAM MEDIA BLOG

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