Removing a tab-content and adding class active to content

Question

Removing a tab-content and adding class active to content

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a tablist on the page that is responsible for picking up some content through a function . When this function returns no value, the right thing is to give hide to this list and its content . Until then everything is working, see the code below:

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

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

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

Look at the examples of what I'm saying:

Delete tabs that do not have content: link (Here it has 4 of 5 tabs, ie one part works)
Delete the tabs but not activate the one that is present: link (Here it has a single tab, but does not receive the active class )

In short, how do I play a active class inside the tab that the content is not 0 or null?

javascript twitter-bootstrap

asked by anonymous 23.11.2015 / 14:51

2 answers

0

If I understand correctly, class active is initializing in the first element via HTML, right? If so, I suggest you add the class more dynamically with javascript. Scan the tabs and find all of the (length) content, of which add the active element in the first element.

23.11.2015 / 17:53

How to put an exact number of pagination results cakephp 2x I installed IONIC, however I have no idea how to make PHP work [closed]

score 1 · Accepted Answer

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 <div class="tab-child"> , checking if it has a child, if it has, it will check if this child has value, if yes add the class active to the tab. If none of the validations is 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 at jsfiddle