refirio.org

HTML

HTMLは以下のとおりです。タブの見出しを ul と li で、表示する内容を div でマークアップしています。最初に表示したい内容には、あらかじめ class="view" を設定しておきます。また、後ほどクラス名をもとにjQueryのプラグインを反映させるため、id="sample" を設定しています。

<div id="sample">
  <ul>
    <li><a href="#contents1" class="view">見出し1</a></li>
    <li><a href="#contents2">見出し2</a></li>
    <li><a href="#contents3">見出し3</a></li>
    <li><a href="#contents4">見出し4</a></li>
    <li><a href="#contents5">見出し5</a></li>
  </ul>
  <div id="contents1">
    <p>コンテンツ1。</p>
  </div>
  <div id="contents2">
    <p>コンテンツ2。</p>
  </div>
  <div id="contents3">
    <p>コンテンツ3。</p>
  </div>
  <div id="contents4">
    <p>コンテンツ4。</p>
  </div>
  <div id="contents5">
    <p>コンテンツ5。</p>
  </div>
</div>

CSS

CSSは以下のとおりです。ul の内容（タブの見出し）は float で横並びに表示しています。また class="view" が設定されたタブは、選択状態であると判るように見た目を調整しています。

<style>
div#sample {
  overflow: hidden;
  width: 500px;
  border: 1px solid #000000;
}
div#sample>ul {
  margin: 0;
}
div#sample>ul li {
  list-style: none;
  float: left;
  width: 100px;
  background-color: #DDDDDD;
}
div#sample>ul li a {
  display: block;
  padding: 10px;
}
div#sample>ul li a.view {
  background-color: #FFFFFF;
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}
div#sample>div {
  overflow: hidden;
  padding: 10px;
}
</style>

JavaScript

JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.tabpanel.js を読み込みます。jquery.tabpanel.js は、タブパネルを作成してくれるjQueryプラグインです。

<script src="../jquery.js"></script>
<script src="jquery.tabpanel.js"></script>
<script>
$(document).ready(function() {
  $('#sample').tabpanel();
});
</script>

プラグイン

jquery.tabpanel.js の内容は以下のとおりです。

(function($) {
  $.fn.tabpanel = function() {
    var target = $(this);

    target.find('div:not(' + $(this).find('ul li a.view').attr('href') + ')').hide();

    target.find('ul li a').click(function() {
      if ($(this).hasClass('view')) {
        return false;
      }

      target.find('div').hide();
      target.find('div' + $(this).attr('href')).show();

      target.find('ul li a').removeClass('view');
      $(this).addClass('view');

      return false;
    });

    return this;
  };
})(jQuery);

まずは

target.find('div:not(' + $(this).find('ul li a.view').attr('href') + ')').hide();

の部分で、最初に表示する内容以外を非表示にします。このうち $(this).find('ul li a.view').attr('href') の処理内容は

• class="view" が割り振られた a タグを探す
• その a タグの href 属性（例えば #contents1 のような値が入る）を取得する

です。例えば #contents1 という値を取得した場合、この後に

target.find('div:not(#contents1)').hide();

という処理が実行されることになります。これは「contents1 というIDが割り振られた div タグ以外を非表示にする」という意味です。これにより、最初に表示する内容以外が非表示になります。

target.find('ul li a').click(function() {
  if ($(this).hasClass('view')) {
    return false;
  }

タブがクリックされたときに実行される処理です。ただし、class="view" が割り振られたタブがクリックされても、何も処理しないようにしています。（表示中のタブがクリックされても、表示内容を切り替える必要が無いため。）

target.find('div').hide();
target.find('div' + $(this).attr('href')).show();

一旦すべてのタブを非表示にしてから、表示すべきタブの内容のみを表示しています。

target.find('ul li a').removeClass('view');
$(this).addClass('view');

タブに割り振られた class="view" を削除し、代わりに今回クリックされたタブに対して class="view" を設定しています。これで、タブがクリックされると表示内容が切り替わり、クリックしたタブが選択状態になります。

これで完成です。