0

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?

2 Respostas 2

1

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');
var isActive = 0;
Array.prototype.forEach.call(tabs, function(childs) {
  var len = childs.children.length;
  if(len > 0 && isActive === 0) {
    for(var i=0; i < len; i++) {
      if(childs.children[i].textContent !== '' && isActive === 0) {
        childs.classList.add('active');
      }
    }
  }
});
.tab-container {
  background: lightblue;
  width: 100%;
}

.tab-child {
  display: inline-block;;
  text-align: center;
  cursor: pointer;

  height: 50px;
  line-height: 50px;
  width: 30%;
}
.tab-child:hover {
  background-color: lightpink;
}
.tab-child.active {
  background-color: lightgreen;
}

.tab-content {
  display: none;
  left: 0px;
  position: absolute;
  top: 60px;
}
.tab-child:hover .tab-content {
  display: block;
}
<div id="tab" class="tab-container">
  <div class="tab-child">
    Tab 1
    <!-- Não existe filho -->
  </div>
  <div class="tab-child">
    Tab 2
    <!-- Existe filho, porem sem valor -->
    <div class="tab-content"></div>
  </div>
  <div class="tab-child">
    Tab 3
    <!-- Existe filho com valor -->
    <div class="tab-content">existe conteudo na tab 3</div>
  </div>
</div>

Veja funcionando no jsfiddle

0

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.

1
  • 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? Commented 23/11/2015 às 16:55

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 .