<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
div class="content">
<div class="tabs-content">
<div class="tabs-menu clearfix">
<ul>
<li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
<li><a href="#" data-tab="tab2">Ipsum</a></li>
<li><a href="#" data-tab="tab3">Dolor</a></li>
</ul>
</div> <!-- tabs-menu -->
<div class="tab1 tabs first-tab">
Conteúdo da aba 1
</div> <!-- .tab1 -->
<div class="tab2 tabs">
Conteúdo da aba 2
</div> <!-- .tab2 -->
<div class="tab3 tabs">
Conteúdo da aba 3
</div> <!-- .tab3 -->
</div> <!-- .tabs -->
</div> <!-- .content -->
/* Geral */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12px;
line-height: 1.5;
}
body {
background: #222222;
}
a:focus {
outline: none;
}
.content {
margin: 30px;
}
.clearfix:after {
content: '.';
height: 0;
font-size: 0;
line-height: 0;
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
}
/* Abas */
.tabs-content {
background: #eee;
font-family: sans-serif;
}
/* Menu das abas */
.tabs-menu {
background: #0074a2;
}
.tabs-menu ul {
list-style: none;
}
.tabs-menu ul li {
float: left;
}
.tabs-menu ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
background: #eee;
color: #000;
}
/* Conteúdo das abas */
.tabs {
display: none;
padding: 30px;
}
.first-tab {
display: block;
}
jQuery(function($){
$('.tabs-menu ul li a').click(function(){
var a = $(this);
var active_tab_class = 'active-tab-menu';
var the_tab = '.' + a.attr('data-tab');
$('.tabs-menu ul li a').removeClass(active_tab_class);
a.addClass(active_tab_class);
$('.tabs-content .tabs').css({
'display' : 'none'
});
$(the_tab).show();
return false;
});
});
