JSFiddle - React, Tailwind, and code Playground

by mojtaba

HTML

<ul class="tabs" id="tabs">
  <li class="selected"><a href="http://bestofthebestent.com/index.php">Home</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/bio.php">Bio</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/photo.php">Photo</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/music.php">Thank</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/contact.php">Contact</a></li>
</ul>

CSS

.selected a { color: #f00; }
.inactive a { color: #999; }

JavaScript

window.onload = function () {
        var tab = document.getElementById('tabs');
        var lis = tab.getElementsByTagName('li');
        
        for (var i = 0, l = lis.length; i < l; i++) {
            lis[i].onclick = function () {
                for (var j = 0; j < l; j++) {
                    lis[j]["className"] = "inactive";
                }
                
                this["className"] = "selected";
            };
        }
    };