Galera montei um sistema de abas utilizando jQuery. Segue ele abaixo.
$('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>
<div class="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>
Bom o sistema esta funcionado muito bem, porem tenho a seguinte e estrutura:
<ul class="tabs">
Aqui fica todas as bastas, e:
<div id="tab-2" class="tab-content">
Aqui fica o conteúdo de cada aba, para facilitar queria mudar a estrita para a seguinte:
<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>
Dessa fora sempre que eu fosse adicionar uma aba nova basta eu colocar o seguinte:
<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>
Alguém poderia me ajudar?