タブ切り替えのjavascriptで今制作中のサイトで利用するのに完璧なものがなかったので、
moo.fxを利用したタブのソース（http://www.nyokiglitter.com/tutorials/tabs.html）を改良して作った。
1. 動きがあること
2. 最初は用意されたタブが開いていない
3. タブを閉じることができる
以上が必須要件。
1は今回の元ソースが個人的には最適な動作をしてくれていたのでほとんどいじっていない。
2と3は探したけれども、これがない。
moo.fxのスクリプトとcssおよびhtmlの関係を見ていると2と3を実装できそうな気配があったのでチャレンジしたところ、完成！
以下が今回作成したデモです。
http://www.spiral-records.com/psts-lib/tabaccordion081027/tabbed.html
詳細は下記の通り。
１ ちょっと変則的だが、一つ目のタブを0pxで見えなくして、タブの中身も同じく0pxにする。
タブのcssである「tab」とタブの中身の「box」をコピペし改良したのが以下のもの。
.tab_no{
float: left;
height: 0px;
width: 0px;
margin: 0px;
}
.box_first{
background: #fff;
width:0px;
height:0px;
position: relative;
}
これをひとつめのタブとボックスのclass属性に追加。もともとあるクラス属性「tab」と「box」は残しておく。でないと動かなくなるので。
２ 一つめのタブをコピって各boxの最後（任意）にペースト。
つまり、タブを閉じるためのリンクに見せかけるということ。
タブの数とボックスの数は一致していないと動かないので、閉じるためのタブ３つ分（今回は開くタブが３つなので）のボックスを３つの既存ボックスの後にペースト。（閉じていると見せかけるために0pxにした最初のボックスをコピペでOK。）
一つ目のボックス↓
<div class="box box_first"></div>
あとはちょいちょいデザインをいじくればOK。
動きのスピードとかはスクリプトをいじる。
わかりやすいようにタブ（ボックス）の本当の番号を書いているので理解しやすいと思います。
ちなみに今回のデモはz-indexでコンテンツの上にかさねて表示するようにしているけど、べつにタブ機能には関係なしです。
注意：jsファイルの読み込み順を間違えないこと。prtotype.lite.jsが最後になってたりすると動かない。
ということで、んー、いい感じ。
moo.fxは動作も軽くてすごくいいと思う。
以前紹介のFancy menuのmootoolsもそうだけど、http://mad4milk.netはかなり素敵です。
最後に、今回のこの「タブ切り替えのjavascript 素敵仕様」は本来推奨されるべき方法ではないと考えますので、javascript自身で実行できるものを引き続き作成中。
しばしお待ちを。
