O módulo Tabs não funciona bem quando se é necessário muitas abas. Mas achei uma solução num tutorial ensinando a fazer abas usando blurbs. O endereço desse tutorial é : https://divilover.com/creating-custom-tabs-icons-using-blurbs/.
Primeiro é necessário criar uma seção de linha única para as abas e definir a ID da seção como blurb-tabs. Depois criar quantas blurbs forem necessárias com a classe tab-title e link do título #tab1, #tab2, #tab3, #tab4 e assim sucessivamente. Tem que ser o línk do título, não funciona se for link do módulo.
Depois, é necessário criar o conteúdo para as abas. Cada uma deve ser uma seção, com qualquer módulo necessário. Cada seção deve ter a classe tab-content e a ID tab1, tab2, tab3, tab4, etc. Se a ideia é que uma aba fique aberta por padrão, essa aba deve ter a classe
/**Serviços - Abas com blurbs**/
/*Colunas*/
#blurb-tabs .et_pb_column {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#blurb-tabs .tab-title {
width: 20%;
}
@media (max-width: 980px ) {
#blurb-tabs .tab-title {
width: 50%;
}
}
@media (max-width: 479px ) {
#blurb-tabs .tab-title {
width: 100%;
}
}
/*Hover style para as blurbs*/
#blurb-tabs .tab-title {
transition: all .3s ease-in-out;
}
#blurb-tabs .tab-title:hover {
cursor: pointer;
background: #222;
}
/*Estilo para aba ativa*/
#blurb-tabs .tab-title.active-tab {
background: #D9DFE2;
}
#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {
color: #000;
}
#blurb-tabs .tab-title.active-tab .et-pb-icon,
#blurb-tabs .tab-title.active-tab .et_pb_blurb_description {
color: #666!important;
}
/*Esconder conteúdo das abas*/
.tab-content {
display: none;
}
/*Mostrar aba ativa*/
.tab-open {
display: block;
}E aqui o código jQuery:
jQuery(document).ready(function($) {
jQuery('.tab-title').each(function () {
var section_id = jQuery(this).find("a").attr("href");
jQuery(this).find("a").removeAttr("href");
jQuery(this).click(function() {
jQuery(this).siblings().removeClass("active-tab");
jQuery(this).addClass("active-tab");
jQuery('.tab-content').hide();
jQuery(section_id).show();
var position = 0;
position = jQuery(section_id).position().top;
jQuery('html, body').animate({
scrollTop: position
}, 1000);
});
});
});E está pronto!
