javascript - Removendo um tab-content e adicionando class active ao que possuir conteúdo - Stack Overflow em Português
Possuo uma tablist na página que é responsável por pegar alguns conteúdos através de uma function. Quando essa function não retorna nenhum valor, o certo é dar um hide nessa list e no seu content. Até ai tudo está funcionando, veja o código abaixo:
var explore = $('#tablist-explore');
if ( $.trim($('#tablist-explore ul').html()).length == 0 ){
$('#explore-tablist').hide();
Esse, no caso, é o responsável por remover o elemento, caso ele não tenha uma child, mas ai vem minha grande dúvida...
Eu tenho 5 tabs, a primeira dela é a que possui a class active por padrão, porém em algumas partes do projeto essa primeira tab não possui conteúdo e a próxima tab não pega a classe active.
Vejam os exemplos do que estou dizendo:
Apaga as tabs que não possuem conteúdo: http://prntscr.com/95zidn (Aqui ele possui 4 de 5 tabs, ou seja, um parte funciona)
Apaga as tabs, mas não ativa a que está presente: http://prntscr.com/95ziy8 (Aqui ele possui uma única tab, mas não recebe a class active)
Resumindo tudo: Como eu faço para jogar uma classe active dentro da tab que o conteúdo não for 0 ou nulo?
editada 30/12/15 às 11:44
perguntada 23/11/15 às 13:51
Desenvolvi uma alternativa para sua necessidade, vamos ver oque ela faz?
Este script irá varrer todas as tabs, que neste caso é a <div class="tab-child">, verificando se possui filho, caso possua, irá verificar se este filho possui valor, se sim adicionará a classe active a tab. Se nenhuma das validações for verdadeira vai para a próxima tab.
var tabs = document.getElementsByClassName('tab-child');
Array.prototype.forEach.call(tabs, function(childs) {
var len = childs.children.length;
if(len > 0 && isActive === 0) {
if(childs.children[i].textContent !== '' && isActive === 0) {
childs.classList.add('active');
.tab-child {
.tab-child:hover {
.tab-child.active {
.tab-child:hover .tab-content {
<div id="tab" class="tab-container">
<div class="tab-child">
<!-- Não existe filho -->
<!-- Existe filho, porem sem valor -->
<!-- Existe filho com valor -->
<div class="tab-content">existe conteudo na tab 3</div>
editada 23/11/15 às 17:49
respondida 23/11/15 às 17:43
Se eu entendi bem, a class active esta inicializando fixa no primeiro elemento via HTML, certo? Se for isso sugiro que adicione a class de forma mais dinamica com javascript. Faça uma varredura nas tabs e localize todas as que possuem conteúdo (length), destas adicione a class active no primeiro elemento.
editada 23/11/15 às 18:00
respondida 23/11/15 às 16:53
Fábio Lima RochaFábio Lima Rocha
Exatamente Fábio, é que por enquanto não tem nem muito o que publicar, o máximo seria HTML e CSS. Eu estou mais confuso na hora de fazer a questão da lógica em quando uma tablist for removida por falta de conteúdo, o código passe uma classe active e um aria-expanded=true pra próxima tab ativa. Entende?