Mark clicked menu item as active - php

Question

So I was wondering how to make the menu item that has been clicked, shown as 'active'/'highligted', so the user can see which page they are on?
I've made this menu bar.
/* Add a black background color to the top navigation */
.topnav_menu {
background-color: #333;
overflow: hidden;
display: flex;
align-items: center;
}
/* Style the links inside the navigation bar */
.topnav_menu a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
cursor: pointer;
}
/* Change the color of links on hover */
.topnav_menu a:hover,
.engine_dropdown:hover .engine_dropbtn {
background-color: #ebebeb;
color: black;
}
<div class="topnav_menu">
<!-- # will be removed for enable redirect -->
Profile
Test Runs
Dashboard
TRT Tools
</div>
After the item has been clicked it should appear highlighted.
EDIT
So I created a solution, but is that the best way?

Answer 1

Created this function to check which page in on, and then if im on that page, I would set the class to active
function active($currect_page){
$url = basename(getcwd())."/".str_replace(".php", "", basename($_SERVER['PHP_SELF'])); // If filename is just "name" or "name.php"
// Also checks which directory the file is in, to avoid highlighting multiple menu items with same name
// $currect_page == $url :: parentFolder/fileName == parentFolder/fileName (without .php here)
if($currect_page == $url || $currect_page == basename(getcwd())."/".basename($_SERVER['PHP_SELF'])){
echo 'active'; // class name in css
}
}
<div class="topnav_menu">
<div id="imgDiv"></div>
Test Runs
Dashboard
TRT Tools
</div>
active class would look like this
/* Active menu item */
.topnav_menu a.active,
.topnav_menu a:focus {
/* When a-tags inside this class has been clicked */
background-color: #ffffff;
color: black;
}

Answer 2

Based on how you have written the HTML, bellow js will solve the problem.
//JS
let a = document.querySelectorAll('a')
for(let i =0; i< a.length; i++){
a[i].onclick = function(){
a.forEach(function(item){
item.classList.remove("active");
});
this.classList.add("active");
}
}