jquery tabs menu 改

jqueryのタブメニューです。
idが使えない作業があったので、data-属性で代替しました。
jquery1.5.1-

```ruby:js
jQuery(function($) {
  $('[data-tabmenu="container"]').each(function() {
    var active   = "is-active",
        inactive = "is-inactive",
        wrap     = $(this),
        target;
    $(window).load(function() {
      target = wrap.find('[data-tabmenu-tab]').eq(0).data('tabmenu-tab');
      wrap.find('[data-tabmenu="contents"]').eq(0).css("height",$('[data-tabmenu-pane]').eq(0).height());
      changeTab();
    });
    wrap.find('[data-tabmenu-tab]').click(function() {
      target = $(this).data('tabmenu-tab');
      changeTab();
    });
    function changeTab() {
      wrap.find('[data-tabmenu-tab]').removeClass(active).addClass(inactive);
      wrap.find('[data-tabmenu-pane]').removeClass(active).addClass(inactive);
      wrap.find('[data-tabmenu-tab="' + target +'"]').removeClass(inactive).addClass(active);
      wrap.find('[data-tabmenu-pane="' + target +'"]').removeClass(inactive).addClass(active);
      wrap.find('[data-tabmenu="contents"]').stop().animate({ height: wrap.find('[data-tabmenu-pane="'+ target +'"]').height()},{duration: 500, easing: 'swing'});
    }
  });
});
```

```ruby:css
.tabmenu_container {}
.tabmenu_nav {
  font-size: 0;
  line-height: 0;
}

.tabmenu_tab {
  display: inline-block;
  margin-left: 2px;
  padding: 4px 10px;
  background-color: #eee;
  font-size: 1rem;
  line-height: 1rem;
}

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

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

.tabmenu_tab.is-inactive {
  cursor: pointer;
}

.tabmenu_content {
  position: relative;
  width: 100%;
  border: 1px solid #000;
}

.tabmenu_pane {
  overflow: hidden;
  transition: all 0.4s linear;
}

.tabmenu_pane.is-active {
  opacity: 1;
}
.tabmenu_pane.is-inactive {
  position: absolute;;
  visibility: visible;
  opacity: 0;
}
```

```ruby:html
<div class="tabmenu_container" data-tabmenu="container">
  <ul class="tabmenu_nav">
    <li class="tabmenu_tab" data-tabmenu-tab="foo">タブ1</li>
    <li class="tabmenu_tab" data-tabmenu-tab="bar">タブ2</li>
  </ul>
  <div class="tabmenu_content" data-tabmenu="contents">
    <div class="tabmenu_pane" data-tabmenu-pane="foo">
      <h2>タブ1：吾輩は猫である</h2>
      <p>ダミーテキスト。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。</p>
      <p>ダミーテキスト。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。</p>
    </div>
    <div class="tabmenu_pane" data-tabmenu-pane="bar">
      <h2>タブ2：坊っちゃん</h2>
      <p>ダミーテキスト。親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</p>
    </div>
  </div>
</div>
```

以前作った『[jquery tabs menu](http://qiita.com/akuden/items/dbcaf15be8f3c857b9bf)』の作り直しです。