カテゴリー：jQuery

2007年6月17日追記：ちゃんとしたのもできました。新しい方をご覧ください。

概要

簡単な、タブ切り替えのテストです。

構造は、次のソースを参照。

タブになる部分をclass="tab"を囲い、その中にclass="tablist"のulを作ります。
各リストはタブの見出しになります。
その下に、任意のIDでブロックを作ります。これが、タブで切り替えられる表示の中身です。
最初に出しておきたいブロックには、class="tabDefault"をつけておきます。
最後に、見出しのラベルから、表示したいブロックのIDをつかってアンカーリンクを張ってください。

JavaScriptが効かない時は、ページ内リンクになりますので、構造的におかしいことはないと思います。

とりあえずは動きのテスト。実用的なのはまたあとで作ってみよう。

スクリプト

$(document).ready(function() {
  $(".tab > div").hide();
  $(".tabDefault").show();
  //
  var tabIndex = $(".tab > div");
  var tabNum = $(tabIndex).length-1;
  //
  $(".tablist > li > a").click(function() {
    var targetID = $(this).attr("href");
    for (i=0; i<=tabNum; i++) {
      $(tabIndex[i]).hide();
      }
    $(targetID).show();
    return false;
  });
});

サンプルCSS

ul.tablist,
ul.tablist li {
    margin: 0;
    padding: 0;
}
ul.tablist li {
    border: 1px solid #999;
    float: left;
    margin-right: 2px;
    padding: 1px 4px;
    list-style: none;
}
.tab div {
    clear: both;
    border: 1px solid #999;
}
.tab:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
  * html .tab:after {
    zoom: 1;
}