JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav side-nav">
        <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> Overview</a>

        </li>
        <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> Employees</a>

        </li>
    </ul>
</div>

CSS

.active {
    border: 1px solid red;
}

JavaScript

// simple shim for String.prototype.endsWith(), for browsers that
// don't yet implement the same:
String.prototype.endsWith = String.prototype.endsWith || function (testString) {
    var reg = new RegExp(testString + '$');
    return reg.test(this);
};

// again, in real-world non-demo use you should use 'document.location':
var fakeLocation = 'http://www.example.com/index.php',
    // finding the last portion of the fakeLocation variable:
    currentPage = fakeLocation.split('/').pop(),
    // getting all the a elements with an href attribute that ends
    // with the currentPage string (after escaping the special
    // characters with the (ugly) regular expression) and the
    // attribute-ends-with ('attribute$=value') selector:
    activeAElements = document.querySelectorAll('.nav a[href$=' + currentPage.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + ']');

// using Array.prototype.forEach to iterate over the array-like
// activeAElements NodeList:
Array.prototype.forEach.call(activeAElements, function (a) {
    // the first argument of the function is the array-element,
    // here an <a> element node;
    // we're adding the 'active' class-name to any <a> element
    // that was found by the above selector:
    a.parentNode.classList.add('active');
});