Removing a tab-content and adding active class to content

Question

I have a tablist on the page who is responsible for picking up some content through a function. When that function does not return any value, the right is to give a hide in that list and in your content. So far everything is working, see the code below:

var explore = $('#tablist-explore');
if ( $.trim($('#tablist-explore ul').html()).length == 0 ){
    $('#explore-tablist').hide();
}

This, in this case, is responsible for removing the element if it does not have a child, but here comes my big doubt...

I have 5 tabs, the first one is the one that owns the class active by default, but in some parts of the project this first tab has no content and the next tab does not take class active.

Look at the examples of what I’m saying:

• Delete tabs that have no content: http://prntscr.com/95zidn (Here it has 4 of 5 tabs, IE, a part works)
• Deletes tabs, but does not activate the tabs present: http://prntscr.com/95ziy8 (Here it has a single tab, but does not receive the active class)

Summing up: How do I play a class active within the tab that the content is not 0 or null?

Answer 1

I’ve developed an alternative to your need, let’s see what it does?

This script will scan all tabs, which in this case is the <div class="tab-child">, checking if you have a child, if you have one, you will check that this child has value, yes you will add the class active a tab. If none of the validations are true, go to the next 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>

See working on jsfiddle

Answer 2

If I understand correctly, the class active this initiating fixed on the first element via HTML, right? If that’s what I suggest you add the class more dynamically with javascript. Scan tabs and locate all tabs with content (length), of which add the class active in the first element.