Galera I mounted a system of tabs using jQuery. Follow it below.
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
.tabs-container{
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
border-bottom: 1px solid #d7d7d7;
}
ul.tabs li{
background: none;
color: #616161;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
color: #484848;
border-bottom: 2px solid #F65314;
}
.tab-content{
display: none;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
.tab-link:hover {
color: #FBBC05;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="tabs-container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab 1</li>
<li class="tab-link" data-tab="tab-2">Tab 2</li>
</ul>
<div id="tab-1" class="tab-content current">
bla bla bla
</div>
<div id="tab-2" class="tab-content">
bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
</div>
</div>
Well, the system works very well, but I have the following structure:
<ul class="tabs">
Here are all the basics, and:
<div id="tab-2" class="tab-content">
Here is the contents of each tab, to facilitate wanted to change the strict to the following:
<div class="tabs-container">
<li class="tab-link current" data-tab="tab-1">Tab 1</li>
<div id="tab-1" class="tab-content current">
bla bla bla
</div>
<li class="tab-link" data-tab="tab-2">Tab 2</li>
<div id="tab-2" class="tab-content">
bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
</div>
</div>
This out whenever I was to add a new tab I just put the following:
<li class="tab-link" data-tab="tab-2">Tab 2</li>
<div id="tab-2" class="tab-content">
bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
</div>
Could anyone help me?