jQueryを使った簡単なタブ切り替えのサンプル

カテゴリー:jQuery

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

概要

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

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

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

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

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

ここには最初のタブの内容が入ります。

ここには2つめのタブの内容が入ります。

DIVの表示を切り替えてタブにしているという感じです。

ここには3つめのタブの内容が入ります。

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;
}

2007年6月10日(日曜日)/04時25分 - kadoyan -
Yahoo!ブックマークに登録Yahoo!ブックマークに登録はてなブックマークに追加はてなブックマークに追加

トラックバックURL:

yukaさん曰く(2011年11月26日(土曜日) 22時22分):

シンプルでわかりやすかったです。

ありがとうございました。

 
%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%62%64%62%66%64%36%64%33%33%61%36%34%31%35%62%35%61%66%31%38%65%34%34%63%33%66%65%33%36%66%39%30%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%63%36%32%65%64%62%31%38%66%38%37%39%37%36%32%64%31%38%64%30%34%62%33%64%63%61%38%33%33%66%37%38%22%3e
CATEGORY