jquery tabs menu

タブメニュー

jqueryのタブメニューです。
セレクタにidやclassをあまり使えない作業があったので、data-属性で代替しました。

js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('[data-tabs="container"]').each(function() {
      var active = "is-active",
          inactive = "is-inactive",
          wrap = $(this);
      wrap.find('[data-tabs="tab"]:first-child,[data-tabs="pane"]:first-child').addClass(active);
      wrap.find('[data-tabs="tab"],[data-tabs="pane"]').not('.'+active).addClass(inactive);
      wrap.find('[data-tabs="contents"]').css("height",wrap.find('[data-tabs="pane"].' + active).height());
      wrap.find('[data-tabs="tab"]').find('a').click(function() {
        wrap.find('[data-tabs="tab"],[data-tabs="pane"]').removeClass(active).addClass(inactive);
        $(this).parent('[data-tabs="tab"]').removeClass(inactive).addClass(active);
        $(this.hash).removeClass(inactive).addClass(active);
        wrap.find('[data-tabs="contents"]').animate({height: wrap.find('[data-tabs="pane"].' + active).height() },{duration: 500, easing: 'swing'});
        return false;
      });
    });
  });
</script>

html

<div class="tabs_container" data-tabs="container">
  <ul class="tabs_nav">
    <li class="tabs_tab" data-tabs="tab"><a href="#foo">タブ1</a></li>
    <li class="tabs_tab" data-tabs="tab"><a href="#bar">タブ2</a></li>
    <li class="tabs_tab" data-tabs="tab"><a href="#baz">タブ3</a></li>
  </ul>
  <div class="tabs_contents" data-tabs="contents">

    <div id="foo" class="tabs_pane" data-tabs="pane">
      <h2>タブ1</h2>
      <p>ダミーテキスト。テキストテキストテキストテキストテキストテキスト</p>
      <p>ダミーテキスト。テキストテキストテキストテキストテキストテキスト</p>
    </div>

    <div id="bar" class="tabs_pane" data-tabs="pane">
      <h2>タブ2</h2>
      <p>ダミーテキスト。テキストテキストテキストテキストテキストテキスト</p>
    </div>

    <div id="baz" class="tabs_pane" data-tabs="pane">
      <h2>タブ3</h2>
      <p>ダミーテキスト。テキストテキストテキストテキストテキストテキスト</p>
      <p>ダミーテキスト。テキストテキストテキストテキストテキストテキスト</p>
      <p>ダミーテキスト。テキストテキストテキストテキストテキストテキスト</p>
    </div>

  </div>
</div>

css

.tabs_container {}

.tabs_nav {
  font-size: 0;
  line-height: 0;
}

.tabs_tab {
  display: inline-block;
  margin-left: 2px;
  padding: 0.3em 10px;
  font-size: 1rem;
  line-height: 1rem;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.tabs_tab:first-child {
  margin-left: 0;
}

.tabs_tab.is-inactive {
  background-color: #eee;
}

.tabs_tab.is-active {
  background-color: #fcc;
}

.tabs_tab:hover {
  opacity: 0.6;
}

.tabs_contents {
  position: relative;
  overflow: hidden;
}

.tabs_pane {
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.tabs_pane.is-inactive {
  position: absolute;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}

.tabs_pane.is-active {
  position: relative;
  opacity: 1;
}

jsはclassの出し入れ処理のみにして表示切替動作は全部cssにさせたかったのですが、transitionが height:auto 対応していないので、高さのアニメーションはjs側で対応しました。
複数設置に対応とか中途半端に汎用性持たせようとしたので冗長になってしまいました。
いっそプラグイン化してしまった方が良かったかも。