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>
以上、ありがとうございました。