title: Javascript Put active tab in bold
body: <p>Hi I'm trying to put the active tab in bold. I think I'm missing something.
  So here is my tabs:</p>
  
  <pre><code> &lt;div class="nav"&gt;
        &lt;span id="tab1"&gt;tab1&lt;/span&gt;| &lt;span id="tab2"&gt;tab2&lt;/span&gt;| &lt;span id="tab3"&gt;tab3 &lt;/span&gt;
  &lt;/div&gt;
   &lt;div id="body"&gt;
        &lt;p&gt; &lt;/p&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>So Here is what I did: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>       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";}</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the css I added:</p>
  
  <pre class="lang-css prettyprint-override"><code>    .active {
          font-weight: 700;
      }
  </code></pre>