Contents by Tabs
HTML
<div class="tabs-container">
<div class="tabs">
<span class="tab">Tab A</span>
<span class="tab">Tab B</span>
<span class="tab">Tab C</span>
</div>
<div class="contents">
<article class="article">
<p>Article A</p>
</article>
<article class="article">
<p>Article B</p>
</article>
<article class="article">
<p>Article C</p>
</article>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.tabs-container {
background-color: #fff;
width: 100%;
max-width: 768px;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
position: relative;
}
.tabs {
width: 100%;
position: relative;
}
.tabs:after {
content: '';
display: block;
clear: both;
}
.tabs .tab {
display: block;
float: left;
line-height: 46px;
padding: 0 1em;
text-align: center;
cursor: default;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: 200ms;
transition: 200ms;
}
.tabs .tab:active {
background-color: #fafafa;
}
.tabs .active-bar {
display: block;
position: absolute;
width: 100px;
height: 2px;
background: tomato;
top: 100%;
margin-top: -1px;
}
.contents {
}
.article {
display: none;
padding: 1.4285em;
}
.article.active {
display: block;
}
JAVASCRIPT
jQuery(function($) {
var _tc = $('.tabs-container');
var _ts = _tc.find('.tabs');
var _cs = _tc.find('.contents');
/* Calculate tabs' width */
var l = _ts.find('span').length;
_ts.find('span').outerWidth( 100/l+'%' );
/* Build active bar */
_ts.append('<span class="active-bar" />');
var _bar = _ts.find('.active-bar');
function setActive(index) {
_ts.find('span')
.eq(index)
.addClass('active')
.siblings()
.removeClass('active');
_cs.find('article')
.eq(index)
.addClass('active')
.fadeIn(300)
.siblings()
.removeClass('active')
.hide();
var wid = _ts.find('span').eq(index).outerWidth();
_bar.width(wid);
}
_ts.on('click', 'span', function() {
var _active = $(this);
var getLft = _active.position().left;
var getWid = _active.outerWidth();
setActive(_active.index());
_bar.animate({
left: getLft,
width: getWid,
}, 300);
});
setActive(0);
});
