Javascript Put active tab in bold

Question

Hi I'm trying to put the active tab in bold. I think I'm missing something. So here is my tabs:

 <div class="nav">
      <span id="tab1">tab1</span>| <span id="tab2">tab2</span>| <span id="tab3">tab3 </span>
</div>
 <div id="body">
      <p> </p>
 </div>

I would like that when I click on "tab1" it becomes bold and displays the text that correspond to it. When I click on "tab2" it becomes bold, and the others not. etc.

So Here is what I did:

       document.getElementById("tab1").onclick = function () {
       document.querySelector("span").classList.remove('active');
       document.getElementById("tab1").classList.add('active'); 
       document.getElementById("body").innerHTML =  "hello";}
        
       document.getElementById("tab2").onclick = function () {
       document.querySelector("span").classList.remove('active');
       document.getElementById("tab2").classList.add('active'); 
       document.getElementById("body").innerHTML =  "hello2";}
        
              
       document.getElementById("tab3").onclick = function () {
       document.querySelector("span").classList.remove('active');
       document.getElementById("tab3").classList.add('active'); 
       document.getElementById("body").innerHTML =  "hello3";}

And the css I added:

    .active {
        font-weight: 700;
    }

score 2 · Answer 1 · answered Jan 29 '18 at 16:20

querySelector returns only one element. You want querySelectorAll. And then you'll need to loop over the results to remove the class from all the matched elements:

document.querySelectorAll("span").forEach(e => e.classList.remove('active'));

document.getElementById("tab1").onclick = function() {
  document.querySelectorAll("span").forEach(e => e.classList.remove('active'));
  this.classList.add('active');
  document.getElementById("body").innerHTML = "hello";
}
document.getElementById("tab2").onclick = function() {
  document.querySelectorAll("span").forEach(e => e.classList.remove('active'));
  this.classList.add('active');
  document.getElementById("body").innerHTML = "hello2";
}
document.getElementById("tab3").onclick = function() {
  document.querySelectorAll("span").forEach(e => e.classList.remove('active'));
  this.classList.add('active');
  document.getElementById("body").innerHTML = "hello3";
}

.active {
  font-weight: 700;
}

<div class="nav">
  <span id="tab1">tab1</span>| <span id="tab2">tab2</span>| <span id="tab3">tab3 </span>
  <div id="body">
    <p>

    </p>
  </div>

score 0 · Answer 2 · answered Jan 29 '18 at 17:49

If you have just 3 tabs or quantity of tabs is not too much then you can hard code them using this script. But if you have many number of tabs, then you can use the solution suggested j08691.

document.getElementById("tab1").onclick = function () 
{
    document.getElementById("tab1").classList.add('active'); 
    document.getElementById("tab2").classList.remove('active');
    document.getElementById("tab3").classList.remove('active');
    document.getElementById("body").innerHTML =  "hello";
}

document.getElementById("tab2").onclick = function () 
{
    document.querySelector("span").classList.remove('active');
    document.getElementById("tab1").classList.remove('active');
    document.getElementById("tab2").classList.add('active'); 
    document.getElementById("tab3").classList.remove('active');
    document.getElementById("body").innerHTML =  "hello2";
}


document.getElementById("tab3").onclick = function () 
{
    document.querySelector("span").classList.remove('active');
    document.getElementById("tab1").classList.remove('active');
    document.getElementById("tab2").classList.remove('active');
    document.getElementById("tab3").classList.add('active'); 
    document.getElementById("body").innerHTML =  "hello3";
}

Hope it helps...Cheers!!!

Javascript Put active tab in bold

2 Answers2