jQueryでリンク範囲をボックス内全域に広げる複数OK

jQueryリンク範囲アイキャッチ
Pocket

リンク範囲をボックス全体に広げたいけど、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)

カテゴリー ホームページ作成テクニック

シェア&ブックマークする

Pocket


  • スマホ
    スマートフォンサイト作成ソフト
  • おすすめ
    おすすめホームページ作成ソフト
  • ビジネス
    企業向けホームページ作成ソフト
  • フリー
    無料ホームページ作成ソフト
  • Webオーサリング
    WEBオーサリングツール
  • seo
    SEO対策ホームページ作成ソフト
  • 初心者
    初心者ホームページ作成ソフト
  • 人気
    人気ホームページ作成ソフト
  • 低価格
    低価格ホームページ作成ソフト
  • EC
    ネットショップ作成ソフト