JavaScript Tabs replace class

Question

I created different classes in my CSS for each tab and added style - background-color to each of them. I wrote a JavaScipt code to move through each tab and display the appropriate contents for that tab.

In my CSS, i also created another class (.now-active) and added style - background-color for the active tab (in class .now-active) which will be called and used by my JavaScript code. Everything up to this point works fine.

Problem: I want the background-color style in the .now-active class above (which is only called by my JavaScript onClick function) to replace the initial style (the background-color) of the current active tab.

This is my CSS class for every tab:

 /* Set CSS property for every button */
.tab button.all{
  background-color: #fff !important;
  color: #000 !important;
}

.tab button.assessment{
  background-color: #616161 !important;
  color: #fff !important;
}

.tab button.games{
  background-color: #00bcd4 !important;
  color: #000 !important;
}

.tab button.assignment{
  background-color: #607d8b !important;
  color: #fff !important;
}

.tab button.practice{
  background-color: #009688 !important;
  color: #fff !important;
}

This is the CSS for active tab to be used by the JavaScript code:

/* Create an active/current tablink class */
.tab button.now-active {
    background-color: green;
}

This is my JavaScript code for operating the Tab:

function openTab(evt, Tab) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {

        tablinks[i].className = tablinks[i].className.replace(" now-active", "");
    }

    var now_active = document.getElementsByClassName("now-active");

    document.getElementById(Tab).style.display = "block"
    evt.currentTarget.className += " now-active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

And finally this is my HTML:

  <div class="penfs-bar hover-text tab penfs-hide-small penfs-hide-medium">
      <button class="tablinks all" onclick="openTab(event, 'All')" id="defaultOpen" style="width:20%">
          <p class="penfs-text-blue">View All</p>
      </button>

      <button class="tablinks assessment" onclick="openTab(event, 'Assessment')" style="width:20%">
          <p class="penfs-text-white">Assessment</p>
      </button>

      <button class="tablinks games" onclick="openTab(event, 'Games')" style="width:20%">
          <p class="penfs-text-white">Play Games</p>
      </button>

      <button class="tablinks assignment" onclick="openTab(event, 'Assignment')" style="width:20%">
          <p class="penfs-text-white">Assignment</p>
      </button>

      <button class="tablinks practice" onclick="openTab(event, 'Practice')" style="width:20%">
          <p class="penfs-text-white">Practice</p>
      </button>
 </div>

Methods i tried: split(), replace(), removeClass().. Maybe i'm not using them in the right way.

Please any help on how to solve this??

Mathias Rechtzigel Mathias Rechtzigel · Accepted Answer · 2018-06-07T23:12:57

There were a couple of things working against you:

The second item in your openTab function ('Assignment', 'Practice') is case sensitive -- changing it to lower case would allow the document to get the right element.
The active class name wasn't using an !important attribute while everything else was.
getElementsByClassName creates an array-like object so you would need to either iterate through that object or manage the state so that there is only 1 item via something like this: var clickedElement = document.getElementsByClassName(Tab)[0];

I stripped out all of the other stuff and put it inside of a codePen -- hope this helps:

function openTab(evt, Tab) {
    var previousElement = document.getElementsByClassName('now-active')[0];
    var clickedElement = document.getElementsByClassName(Tab)[0];

    if(previousElement){
      previousElement.classList.remove('now-active');  
    }

    clickedElement.classList.add('now-active');

}

https://codepen.io/MathiasaurusRex/pen/ERNPBz

JavaScript Tabs replace class

1 Answers