1

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?

1 Resposta 1

3

Apenas uma sugestão, quando eu faço sistema de abas uso a mesma estrutura que você usa, porém crio as os li de navegação dinamicamente.

Assim nem precisa acrescentá-las, basta percorrer as div.tab-content:

$('.tab-content').each(function(i) {
    var tabTitle = $(this).data('tab-title');
    var current = $(this).hasClass('current') ? "current" : "";
    var newTab = $('<li class="tab-link"></li>');
    newTab.html(tabTitle)
   .addClass(current)
   .attr('data-tab', $(this).attr('id'));
   $('ul.tabs').append(newTab)
 })

No HTML o que mudou somente foi o acréscimodo data-tab-title que define o título da tab a ser mostrada.

Resultado:

$(document).ready(function() {
  $('.tab-content').each(function(i) {
    var tabTitle = $(this).data('tab-title');
    var current = $(this).hasClass('current') ? "current" : "";
    var newTab = $('<li class="tab-link"></li>');
    newTab.html(tabTitle)
      .addClass(current)
      .attr('data-tab', $(this).attr('id'));
    $('ul.tabs').append(newTab)
  })

  $(document).on('click', '.tabs li', function() {
    var tab_id = $(this).attr('data-tab');

    $('.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: block;
}
.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"></ul>
  
  <div id="tab-1" data-tab-title="Tab 1" class="tab-content current">
    bla bla bla
  </div>
  <div id="tab-2" data-tab-title="Tab 2" class="tab-content">
    bla bla bla
    <br>bal bal balbla bla bla
    <br>bal bal bal
  </div>
  <div id="tab-3" data-tab-title="Tab 3" class="tab-content">
    bla bla bla 2
    <br>bal bal balbla bla bla
    <br>bal bal bal
  </div>
</div>

1
  • perfeito muito bom mesmo, muito mais simples do que eu queria fazer 6/08/2016 às 18:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .