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);
};

var fakeLocation = 'http://www.example.com/index.php';

$('.nav a').each(function () {
    // get the absolute URL from the <a> element:
    var href = this.href,
        // get the current page and file-type:
        pageAndFile = href.split('/').pop();
    // if the location ends with the pageAndFile found in
    // the current <a> element (using String.prototype.endsWith())
    // we add the 'active' class-name:
    if (fakeLocation.endsWith(pageAndFile)) {
        $(this).closest('li').addClass('active');
    }
});