jQueryでリンク範囲をボックス内全域に広げてみよう

リンク範囲をボックス全体に広げたいけど、HTMLのマークアップがおかしなことになるので、jQueryを使ってなんとかしたいと思っている方、複数のクラスを指定した箇所をまとめて同じ動作を適用したい方はこのページに解決方法が書いてあります!

↓こんな感じのデザインのリンク範囲を広げてボックスいっぱいにする方法です。
カード型デザインのサンプル画像

1箇所だけ(1つのクラス)に適用したい場合

window.locationの.locationとはwindowオブジェクトのプロパティ。

MDNには「現在のURLの情報とそれを変更するためのメソッドを提供する」と描かれている、つまり、.locationには現在のURLの情報が格納されており、操作ができるということです。

$(this)は、jQueryのオブジェクトで.scroll-itemを指します。

$(this)にahrefの情報を入れたものをwindow.locationに代入したという事になります。

複数箇所に適用したい場合

ダメなパターン

複数箇所なので、+で繋いでも動きません。

これも動きません。

完成形

addを利用し、まとめて処理する事で動作します。

変数にクラスを代入する。そして.addを使って同時に処理する。引数に入れた値を加える事ができる。.addは終了後破棄される。

もう1箇所追加してみる

addの第2引数に変数追加しても動作しませんでした。

addをもう一つつなぐ事で動作します。

CSSでポインターを表現

最後にボックスのaタグ以外の拡大したリンク範囲にマウスカーソルがかかった時の処理をしないといけません。jQueryではクリックした時に拡大されますので、マウスカーソルがボックスに掛かっていてもクリックできるかわからない状態です。ポインターを変化させる簡単な方法はスタイルシートで指定することです。

指定するボックスにcursor: pointer;を追加すればカーソルが手のマークに変わります。

以上試してみた事をまとめました。参考にしてください。

参考サイトwindow.location|MDN
ロケーションについて(Location)

  1. よかったらシェア
  2. B!
カテゴリー ホームページ作成