クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

投稿日:2017年12月19日 更新日:

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。
そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。
※実際は動作する場合もありますが、「特定のブラウザで動作しない」「ブラウザのバージョンアップで動作しなくなった」などの不具合が予想されます。

次のようなHTMLはNGとなります。

divはブロックレベル要素であるため、インライン要素であるaタグで囲ってはいけません。

どうしてもブロックレベル要素をリンクの様に扱いたい場合は、少し複雑なCSSを記述する必要があります。
親要素のpositionを設定して、aタグの横幅を100%にして・・・とかなり面倒です。

今回はCSSでは無く、jQueryを利用してブロックレベル要素をリンクにしたいと思います。

結論から言えば、aタグを利用せずに画面の遷移をjQueryで行います。
ブロックレベル要素がクリックされたら、指定したURLへ移動するという処理をjQueryで作成するイメージです。

HTML(ブロックレベル要素をリンクにしたい(aタグで囲まない))

リンクにしたいブロックレベル要素に「menu-item」というクラスを追加します。

次に「data-url」という属性と値を付加します。
値には画面遷移したURLを記述します。

jQuery側では上記の2つを使って「menu-item」がクリックされたら「data-url」の値のURLに画面遷移する、という処理を作ります。

スクリプト(ブロックレベル要素をリンクにしたい(aタグで囲まない))

[ 2行目 ]
「menu-item」がクリックされた時のイベントとして記載。

[ 3行目 ]

クリックされた「menu-item」の「data-url」に入っている値の画面に遷移する。

 

以上、ブロックレベル要素をリンクにする方法は、いくつかあると思いますが、今回のjQueryを使う方法が一番簡単かつ確実だと思います。
良ければ試してみてくださいね。

-jQuery

執筆者:

関連記事

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

jQuery プラグインlazyload.js(画像の遅延読み込み)

スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。 あれは画像の遅延読み込みという事をしているそうです。 ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み …

jQuery テキストボックスのフォーカス時にテキストを全選択

サイトのUI(ユーザーインターフェイス)向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。 バックスペースで1文字ずつ削 …

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …

jQuery CSSクラスの追加と削除

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。 今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを …


comment

メールアドレスが公開されることはありません。