Webサイトでよく目にするタブメニュー。実装自体は難しくないのですが、最近アクセシビリティというものの対応案件がありマークアップでかなり四苦八苦しました。
はじめタブ部分はaタグで囲まず、cssでカーソルを手マーク（pointer）に変えていたのですが、それではTabキーでリンクを移動してきた際にタブにフォーカスが当たらずアクセシビリティとしてNGをくらいました。
そこでタブ部分をaタグで囲むようにマークアップを変更したのですが、ある問題が勃発！それはページ内リンクとして機能してしまい、タブをクリックするとページ内で表示位置が動いてしまうこと。
それをjQueryで回避する方法を調べました。
まずはダメな場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul id="tabmenu"> <li id="tab_l"><a href="#tab-01">タブ左</a></li> <li id="tab_r"><a href="#tab-02">タブ右</a></li> </ul> <div id="tab-01"> <p>タブ左メニュー01</p> <p>タブ左メニュー02</p> <p>タブ左メニュー03</p> <p>タブ左メニュー04</p> <p>タブ左メニュー05</p> </div> <div id="tab-02"> <p>タブ右メニュー01</p> <p>タブ右メニュー02</p> <p>タブ右メニュー03</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
ul#tabmenu { list-style:none; } ul#tabmenu li { width:200px; display:block; float:left; background:#009; color:#fff; font-weight:bold; text-align:center; margin:0 12px 0 0; padding:2px 0; border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; } ul#tabmenu li a { text-decoration:none; color:#fff; display:block; } ul#tabmenu:after{ content:""; display:block; clear:both; } div#tab-01 { display:none; width:200px; margin-left:40px; } div#tab-02 { margin-left:252px; margin-top:1000px; /* サンプルのためわざと入れています */ display:none; width:200px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function(){ // 左タブをクリック $('li#tab_l').click(function() { $('div#tab-01').css({'display' : 'block'}); $('div#tab-02').css({'display' : 'none'}); }); // 右タブをクリック $('li#tab_r').click(function() { $('div#tab-01').css({'display' : 'none'}); $('div#tab-02').css({'display' : 'block'}); }); // 最初のタブを表示 $('div#tab-01').css({'display' : 'block'}); }); |
恥ずかしいソースコードなのはご愛嬌
上記のコードのサンプル
大丈夫な場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(function(){ $('#tab_l').on("click", function (e) { e.preventDefault(); }); $('#tab_r').on("click", function (e) { e.preventDefault(); }); // 左タブをクリック $('li#tab_l').click(function() { $('div#tab-01').css({'display' : 'block'}); $('div#tab-02').css({'display' : 'none'}); }); // 右タブをクリック $('li#tab_r').click(function() { $('div#tab-01').css({'display' : 'none'}); $('div#tab-02').css({'display' : 'block'}); }); // 最初のタブを表示 $('div#tab-01').css({'display' : 'block'}); }); |
JSのみ更新
上記のコードのサンプル
return false;を使ってリンクを無効化する方法もあるのですが、その場合タブで切り替える部分も機能しなくなってしまいます。ページ内リンクのみを無効化したいためpreventDefaultを使用しました。
参考サイト
TAM Technical Team Tips Note
jQuery のバブリング、preventDefault() や stopPropagation() の使用例
ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について
[tmkm-amazon asin=’4048913913′][/tmkm-amazon]
