THE HAM MEDIA BLOG

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

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

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

以前にも、2回程エントリーをだしていたのですが、年末になって、この『リンクのクリック領域をブロック全体にするスクリプト』へのアクセスがちょっと増えていましたので、改めて再度まとめてみようかと思います。

リンクのクリック領域をブロック全体にするとは?

どういうケースかというと、商品の一覧で、画像をクリックしても、画像下の説明テキストをクリックしても、ひとつのブロック内であれば全体をひとつのリンクとしたい!というような場合に利用します。

HTMLで簡単につくろうとしたら、aタグをブロック全体に付けたらいいのですが、うまく全体にならなかったり、動作がおかしくなったり、なによりマークアップ的にいいのかな?なんて思ったりもするので、あまり利用はしないと思います。ですが、JavaScriptを使えば簡単にこれが実装できるのです!

さらにjQueryを使えば、さらに簡単にブロックにリンクをつけることができるので、簡単なサンプルをご紹介します。

今回使うHTML

<ul>
<li>ダミーテキストダミーテキストダミーテキスト<a href="#">リンク</a></li>
<li>ダミーテキストダミーテキストダミーテキスト<a href="#">リンク</a></li>
<li>ダミーテキストダミーテキストダミーテキスト<a href="#">リンク</a></li>
</ul>

以前に紹介したときと同じように、単純にliをCSSでブロックに見せて作ったサンプルです。

それぞれのブロックにリンクを付けておりますので、是非それぞれのサンプルのブロックをクリックしてみてください。

同じウィンドウ内に開く

lovationを利用した場合は下記のように。

■スクリプト

$("div#test1 li").click(function(){
  window.location=$(this).find("a").attr("href");
  return false;
});

■プレビュー

  • ダミーテキストダミーテキストダミーテキスト
    リンク1
  • ダミーテキストダミーテキストダミーテキスト
    リンク2
  • ダミーテキストダミーテキストダミーテキスト
    リンク3

同一ウィンドウ内でひらくだけなら、これでOK。指定したブロック内のaタグのリンク先を、同じウィンドウ内でひらきます。ただし、この場合は同じウィンドウ内にだけでしか開きません。

同一ウィンドウで開く

もう一つ、同一ウィンドウ内で開くサンプルを先にご紹介。

■スクリプト

$("div#test2 li").click(function(){
  window.open($(this).find("a").attr("href"), '_self');
  return false;
});

■プレビュー

  • ダミーテキストダミーテキストダミーテキスト
    リンク4
  • ダミーテキストダミーテキストダミーテキスト
    リンク5
  • ダミーテキストダミーテキストダミーテキスト
    リンク6

window.openを使い、”_self”で同一ウィンドウということを指定しています。

別ウィンドウで開く

上記の同一ウィンドウを別ウィンドウで開くには、下記のようにします。

■スクリプト

$("div#test3 li").click(function(){
  window.open($(this).find("a").attr("href"), '_blank');
  return false;
});

■プレビュー

  • ダミーテキストダミーテキストダミーテキスト
    リンク7
  • ダミーテキストダミーテキストダミーテキスト
    リンク8
  • ダミーテキストダミーテキストダミーテキスト
    リンク9

単純に”_blank”を指定。attrでtargetをつけてももちろんOKですが、このほうがシンプルかなと。

リンクがブロック内に複数ある場合

さて、ここまではブロック内にリンクが1つだけしか無い場合を紹介しましたが、2つ以上ある場合はどうなるでしょう。

まずは先ほどのスクリプトのまま、複数指定しておいてみましょう。

■スクリプト

$("div#test4 li").click(function(){
  window.open($(this).find("a").attr("href"), '_blank');
  return false;
});

■プレビュー

ブロック内の2つのリンクうち、最初リンクの方が開きます。

リンクがブロック内に複数ある場合に一つだけ選択する方法

ブロック内の2つのリンクのうち、最初ではなく2つ目に出てきたリンクを開くようにするには、下記のようにしてみます。

■スクリプト

$("div#test5 li").click(function(){
  window.open($(this).find("a").eq(1).attr("href"), '_blank');
  return false;
});

■プレビュー

eq(○)で○番目のリンクを指定するようにします。指定した位置固定になってしまいますが、複数リンクがあって、決まった個数目のを指定するような場合は、このようにしてみるのがシンプル。

さて、今回紹介したこのリンク領域を広げるサンプルは、それほど多く利用されるような仕組みではないかもしれませんが、どうしても「ブロック全体にリンクをつけたい!」という場合は、是非利用してみてください。

余談

今回のサンプル、ブロック部分のクリックの動作はいいのですが、リンク本体をクリックすると、ものによってはページ内で移動してしまうという。サンプルのリンク先IDをつけていたためというのと、そのページ内リンクに、スルスルスクロールを付けてしてしまっていたのでそちらが動いてしまうという・・・作っている時は気付かなかった!!まぁ、気にせずに(笑)

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

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

ホームページアドレス:

コメント: [必須入力]

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


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/178871946
※ブログオーナーが承認したトラックバックのみ表示されます。

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

トップに戻る

×

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