小粋空間  -  a cheap joke and a play on words site

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

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

１．問題点

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

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

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

２．対処方法

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のサンプルコードの流用です。