インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。
そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。
※実際は動作する場合もありますが、「特定のブラウザで動作しない」「ブラウザのバージョンアップで動作しなくなった」などの不具合が予想されます。
次のようなHTMLはNGとなります。
|
1 2 3 4 5 6 7 8 9 10 |
<a href="/"> <div> ホーム </div> </a> <a href="/item"> <div> 商品情報 </div> </a> |
divはブロックレベル要素であるため、インライン要素であるaタグで囲ってはいけません。
どうしてもブロックレベル要素をリンクの様に扱いたい場合は、少し複雑なCSSを記述する必要があります。
親要素のpositionを設定して、aタグの横幅を100%にして・・・とかなり面倒です。
今回はCSSでは無く、jQueryを利用してブロックレベル要素をリンクにしたいと思います。
結論から言えば、aタグを利用せずに画面の遷移をjQueryで行います。
ブロックレベル要素がクリックされたら、指定したURLへ移動するという処理をjQueryで作成するイメージです。
HTML（ブロックレベル要素をリンクにしたい（aタグで囲まない））
|
1 2 3 4 5 6 |
<div class="menu-item" data-url="/"> HOME </div> <div class="menu-item" data-url="/item"> 商品 </div> |
リンクにしたいブロックレベル要素に「menu-item」というクラスを追加します。
次に「data-url」という属性と値を付加します。
値には画面遷移したURLを記述します。
jQuery側では上記の2つを使って「menu-item」がクリックされたら「data-url」の値のURLに画面遷移する、という処理を作ります。
スクリプト（ブロックレベル要素をリンクにしたい（aタグで囲まない））
|
1 2 3 4 5 |
$(function(){ $('.menu-item').click(function(){ location.href=$(this).attr('data-url'); }); }); |
[ 2行目 ]
「menu-item」がクリックされた時のイベントとして記載。
[ 3行目 ]
クリックされた「menu-item」の「data-url」に入っている値の画面に遷移する。
以上、ブロックレベル要素をリンクにする方法は、いくつかあると思いますが、今回のjQueryを使う方法が一番簡単かつ確実だと思います。
良ければ試してみてくださいね。
