「JavaScript でタブ切り替え UI を実装する」を改良してみた

JavaScript でタブ切り替え UI を実装する | WWW WATCH
で紹介されているスクリプトは、
軽いし、ソースも読みやすいしでとても便利。

気になること

でも、ちょっと気になることが2つある。

タブが増やしたいときに、スクリプトに自分でセットアップ用のコードを書き足さなくてはならない。
タブをクリックしての切り替えはできるが、アンカータグのリンクからタブを切り替えることができない。

気になることを直すと得られるメリット

1.は大した手間ではないのだけど、
どうせならHTMLを編集するだけで自動的にタブが作られた方が便利。
2.はそんなことできなくてもいいって人の方が多いのかもしれないけど、
僕は以下のように書いたリンクからもタブ切り替えできたほうがうれしい。

<a href="#menu1">Menu1へ飛ぶ</a>

デモとソース一式

ってことで、リンク先のスクリプトにちょっと手を加えて、
上記の2つの気になることを解決してみた。
デモはここ
2.については、デモを触ってもらえれば、
ちゃんとリンクからタブ切り替えできてることが分かると思う。
ソース一式はここ

カスタマイズ方法

1.については、自分でカスタマイズしようとしたときにきっと分かってもらえるかと。
以下のようにHTMLの編集だけすればOK。

<ul id="tab">
  <li class="selected"><a href="#menu1">Menu1</a></li>
  <li><a href="#menu2">Menu2</a></li>
  <li><a href="#menu3">Menu3</a></li>
  <li><a href="#new_menu">New Menu</a></li>
</ul>

<dl id="new_menu">
  <dt>New Menu</dt>
  <dd>新しいメニューを追加！</dd>
</dl>