JSFiddle - React, Tailwind, and code Playground

by Ryan Brewer

HTML

<footer>
    <ul>
        <li> <a class="footer-link" href="#contact" name="#contact" data-scroll><span class="icon-chat">         </span>Contact</a>

        </li>
        <li> <a class="footer-link" href="#work" name="#work" data-scroll><span class="icon-tools-2"></span>Work</a>

        </li>
        <li> <a class="footer-link" href="#services" name="#services" data-scroll><span class="icon-briefcase"></span>Services</a>

        </li>
        <li> <a class="footer-link" href="blog.html" name="blog.html"><span class="icon-pencil"></span>Blog</a>

        </li>
    </ul>
</footer>
<div class="spacer"></div>
<div id="contact">CONTACT SECTION</div>
<div class="spacer"></div>

CSS

footer a{
    color: blue;
    text-decoration: underline;
}

.current {
    color: grey;
    text-decoration: none;
}

.spacer {
    width:100%;
    height:1000px;
    background-color: grey
}
#contact {
    width:100%;
    height: 200px;
    background-color: blue;
}

JavaScript

$('.footer-link').each(function (i) {
    var loc = window.location;
    var pathName = loc.pathname.substring(loc.pathname.lastIndexOf('/') + 1);
    var page = $(this).attr("href");
    console.log(pathName);
    console.log(page);
    if (page == pathName) {
        $(this).addClass("current");
    }
});
$('.footer-link').on('click', function() {
    $('.footer-link').each(function(){
        $(this).removeClass("current");
    });
    $(this).addClass("current");
})