note

jquery tabs

jquery版タブです。
classのトグルとheight操作だけのシンプルな処理。
負荷の高いslideToggleは使用せず、slideアニメーションはcssに任せました。

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
/* reset */
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  box-sizing: border-box;
  padding: 50px;
}
ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* tabs */
.c-tabs-01 {
  display: flex;
  flex-wrap: nowrap;
}
.c-tabs-01 > .item:not(:first-child) {
  margin-left: 2px;
}
.c-tabs-01 .tab {
  display: inline-block;
  padding: 2px 10px;
  background-color: #eee;
  text-align: center;
  transition: opacity 0.2s linear;
}
.c-tabs-01 .tab:hover {
  opacity: 0.6;
}
.c-tabs-01 .tab.is-current {
  background-color: #fcc;
}
.c-tabpane-01 {
  overflow: hidden;
  transition: all 0.4s ease;
}
.c-tabpane-01.is-hidden {
  visibility: hidden;
  opacity: 0;
}
.tabs_pane.is-show {
  visibility: visible;
  opacity: 1;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   $('[data-tabs]').each(function() {
      var isCurrent = "is-current",
          isShow = 'is-show',
          isHidden = 'is-hidden',
          current,
          $wrap = $(this),
          $tab = $wrap.find('a'),
          $panes = [];
      if(!$wrap.find('.'+isCurrent)[0]) {
        current = 0;
        $tab.eq(0).addClass(isCurrent);
      }
      $tab.each(function() {
          var $this = $(this),
              $pane = $( $this.attr('href') ),
              h = $pane.height();
          $pane.attr('data-height',h);
          if( $this.hasClass(isCurrent) ) {
              current = $tab.index(this);
              $pane.css('height',h).addClass(isShow);
          } else {
              $pane.css('height',0).addClass(isHidden);
          }
          $panes.push($pane);
      });
      $tab.on('click', function(e){
          $panes[current].css('height',0).removeClass(isShow).addClass(isHidden);
          $tab.removeClass(isCurrent);
          current = $tab.index(this);
          $tab.eq(current).addClass(isCurrent);
          $panes[current].removeClass(isHidden).addClass(isShow).css('height', $panes[current].attr('data-height'));
          e.preventDefault();
      });
    });
});
</script>
</head>
<body>

<ul class="c-tabs-01" data-tabs>
  <li class="item"><a href="#foo" class="tab">foo</a></li>
  <li class="item"><a href="#bar" class="tab">bar</a></li>
  <li class="item"><a href="#baz" class="tab">baz</a></li>
  <li class="item"><a href="#qux" class="tab">qux</a></li>
</ul>
<div id="foo" class="c-tabpane-01">
  #foo tab content 01
</div>
<div id="bar" class="c-tabpane-01">
  #bar tab <br>content 02
</div>
<div id="baz" class="c-tabpane-01">
  #baz tab <br><br>content 03
</div>
<div id="qux" class="c-tabpane-01">
  #qux tab <br><br><br>content 04
</div>

<hr>

<ul class="c-tabs-01" data-tabs>
  <li class="item"><a href="#hoge" class="tab is-current">hoge</a></li>
  <li class="item"><a href="#fuga" class="tab">fuga</a></li>
  <li class="item"><a href="#piyo" class="tab">piyo</a></li>
  <li class="item"><a href="#moge" class="tab">moge</a></li>
</ul>
<div id="hoge" class="c-tabpane-01">
  #hoge tab content 01
</div>
<div id="fuga" class="c-tabpane-01">
  #fuga tab content 02
</div>
<div id="piyo" class="c-tabpane-01">
  #piyo tab content 03
</div>
<div id="moge" class="c-tabpane-01">
  #moge tab content 04
</div>

</body>
</html>

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