JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<ul id="navbar">
  <li class="inactive" id="home"><a href="#Home"  onclick="load_home()">HOME</a></li>
  <li class="inactive"  id="products"><a href="#Products"  onclick="load_products()">PRODUCTS</a></li>
  <li class="inactive"  id="bo"><a href="#Products"  onclick="load_bo()">BO</a></li>
</ul>

CSS

.inactive a{
  color: red;
}

.active a{
  color: blue;
}

JavaScript

make_all_inactive = function() {
  var childs = document.getElementById("navbar").childNodes;
  for(var i = 0; i < childs.length; i++) {
    var child = childs[i];
    if (child.tagName === 'LI') {
      child.className = "inactive";
    }
  }
}

load_home = function() {
  make_all_inactive();
  //document.getElementById("content").innerHTML='that is your homepage';
  document.getElementById("home").className = 'active';
}

load_products = function() {
  make_all_inactive();
  //document.getElementById("content").innerHTML='that is your homepage';
  document.getElementById("products").className = 'active';
}