ページ内リンクを無効にしてタブメニューを動かす(jQueryのpreventDefault)

Webサイトでよく目にするタブメニュー。実装自体は難しくないのですが、最近アクセシビリティというものの対応案件がありマークアップでかなり四苦八苦しました。

はじめタブ部分はaタグで囲まず、cssでカーソルを手マーク(pointer)に変えていたのですが、それではTabキーでリンクを移動してきた際にタブにフォーカスが当たらずアクセシビリティとしてNGをくらいました。

そこでタブ部分をaタグで囲むようにマークアップを変更したのですが、ある問題が勃発!それはページ内リンクとして機能してしまい、タブをクリックするとページ内で表示位置が動いてしまうこと。
それをjQueryで回避する方法を調べました。

まずはダメな場合

恥ずかしいソースコードなのはご愛嬌
上記のコードのサンプル

大丈夫な場合

JSのみ更新
上記のコードのサンプル
return false;を使ってリンクを無効化する方法もあるのですが、その場合タブで切り替える部分も機能しなくなってしまいます。ページ内リンクのみを無効化したいためpreventDefaultを使用しました。

参考サイト
TAM Technical Team Tips Note
jQuery のバブリング、preventDefault() や stopPropagation() の使用例

ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

  • このエントリーをはてなブックマークに追加
  • Pocket   
  • 5 follow us in feedly
comments powered by Disqus