JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ul_items" id="navigation">
        <li><a href="index.php">1</a></li>
        <li><a href="index.php?pg=2">2</a></li>
        <li><a href="index.php?pg=3">3</a></li>
        <li><a href="index.php?pg=4">4</a></li>
        <li><a href="index.php?pg=5">5</a></li>             
    </ul>

CSS

.ul_items { margin: 0; float:left;  height:46px; width: 900px; overflow: hidden; } .ul_items li { top:0;   height:46px; float: left; width: 150px; list-style: none; } .ul_items li a { width:150px; float: left; height: 38px; display: block; color: #000000; font-size: 14px; text-decoration: none;   text-transform:uppercase; font-family: 'Trebuchet MS', Tahoma, Verdana; } .ul_items li a:hover { color: #FFF; text-decoration: none;   text-transform:uppercase; font-family: 'Trebuchet MS', Tahoma, Verdana; } li.current a { color:#FFF; }

JavaScript

$(document).ready(function(){
        $("#navigation").find("a[href*='"+window.location.href+"']").each(function(){
                $(this).addClass("current")
        });
    
    });