JSFiddle - React, Tailwind, and code Playground

by DinoMyte

HTML

<div id="topnav-bg">
     <div id="topnav">
         <ul>
            <li><a href="../index.html">Home</a></li>  <!--dots mean "www.myurlsomething.com"-->
            <li><a href="../about.html">About</a></li>
            <li><a href="../science.html">Science</a></li>
            <li><a href="../adventure.html">Field trip</a></li>
            <li><a href="../team.html">Team</a></li>
            <li><a href="../biblio.html">Bibliography</a></li>
         </ul>
     </div>
  </div>

CSS

.active
{
  border: 1px solid green;
}

JavaScript

$(document).ready(function() {
       var url = 'http://localhost/about.html';
        $("[href]").each(function() {
           if (url.indexOf(this.href.split('/')[this.href.split('/').length - 1]) != -1){
                  $(this).addClass("active");
                }
            });
        });