jQuery UI Tabsで作ったタブのフォーカスをはずす方法

jQuery UI Tabsで作ったタブのフォーカスをはずす方法

Posted at April 19,2011 2:22 AM
Tag:[JavaScript, jQuery]

jQuery UI Tabsで作ったタブをクリックしたときに、タブのフォーカスをはずす方法です。jQuery UI Tabsについては「jQuery UI Tabsを使ってタブを実装する」を参照してください。

1.問題点

jQuery UI Tabsで作ったタブをクリックすると、フォーカスがあたったまま(=クリックしたとき点線が表示)になる場合があり、美しくありません。

下の例では真ん中の「WordPrerssプラグイン」のタブをクリックした状態なのですが、フォーカスがあたっているのでどれが選択されているのかよく分からない状態になってしまってます。

フォーカスがあたった状態

これを次のようにフォーカスを外して、選択したタブがきれいに表示されるように修正します。

フォーカスをはずした状態

2.対処方法

jQuery UI Tabs用の(X)HTMLマークアップが次のようになっている場合、

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">aaa</div>
  <div id="tabs-2">bbb</div>
  <div id="tabs-3">ccc</div>
</div>

ul要素にid属性またはclass属性を追加し、

<div id="tabs">
  <ul id="tab">
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">aaa</div>
  <div id="tabs-2">bbb</div>
  <div id="tabs-3">ccc</div>
</div>


タブを表示するページに次のJavaScriptを設定します。

<script type="text/javascript">
$('#tab a').click(function(){
    this.blur();
});
</script>

この対処はjQuery UI Tabsのサンプルコードの流用です。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

こんにちは。

リンクのフォーカス時に点線のアウトラインが表示されるのは、FirefoxとInternet Explorerの仕様によるもので、JSでフォーカスを解除しなくてもCSSで回避が可能です。

http://itref.fc2web.com/css/outline.html

このサンプルの場合ですと

#tabs ul#tab li a {
outline: none;
}

で出なくなります。
もし記事の意図と異なっていたらすみません。

[1] Posted by WebbingStudio : April 19, 2011 4:16 PM

>WebbingStudioさん
こんばんは。
アドバイスありがとうございます。勉強になりました。
WebbingStudioさんのタブのフォーカスが外れていたのはその設定だったんですね。
あとタブのデザインが気に入ったので事後報告ですいませんがちょっこっと真似させて頂きました。
ではでは!

[2] Posted by yujiro logo : April 20, 2011 2:19 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)