Answer: To achieve a "current" link effect, CSS is required. Here is a tutorial that explains how to implement it.

Tutorial on creating current page highlight with CSS

Example: Another solution for highlighting the current page

This method has been successful in my case

add a simple method

<div id='cssmenu'>
<ul>
<li class=''><a href='1.html'><span>1</span></a></li>
<li class=''><a href='2.html'><span>2</span></a></li>
<li class='' style="float:right;"><a href='3.html'><span>3</span></a></li>
</ul>
</div>

$("document").ready(function(){
$(function() {
$('.cssmenu a[href="' + location.pathname.split("/")[location.pathname.split("/").length-1] + '"]').parent().addClass('active');
});

});

Since the tag assigned to this question is CSS, I will share how I achieved it.

1. Start by creating a class in your .css file:

   a.activePage{ color: green; border-bottom: solid; border-width: 3px;}

2. Your navigation bar structure should look like this:

   • Home
   • Contact Us
   • About Us

NOTE: If you are already styling all of your nav-bar elements with a general class, you can add the specific-class we created to overwrite those styles by placing it after the common class in the html-tag.

For example: If you have a class named 'navList' for all list items and want to apply special-case styling from class 'activePage'.

.CSS file:

a.navList{text-decoration: none; color: gray;}
a.activePage{ color: green; border-bottom: solid; border-width: 3px;}

.HTML file:

<div id="sub-header">
    <ul>
        <li> <a href="index.php" class= "navList activePage" >Home</a> </li>
        <li> <a href="contact.php" class= "navList">Contact Us</a> </li>
        <li> <a href="about.php" class= "navList">About Us</a> </li>
    </ul>
</div>

See how one class name follows another for cascading effect.

Perhaps this might not be the most efficient method, but I'm going to share it anyway.

I utilized PHP, Bootstrap, and Font Awesome in creating my solution.

Basically, I have two pages: 1. index and 2. create-user

Add the following code snippet above your existing code:

<?php
$name=basename($_SERVER["REQUEST_URI"]);
$name=str_replace(".php","",$name);
switch ($name) {
    case "create-user":
        $a = 2;
        break;
    case "index":
        $a = 1;
        break;
    default:
        $a=1;
}
?>

For the menu functionality, add

<?php if($a==1){echo "active";} ?>

<?php if($a==2){echo "active";} ?>

<ul id="menu" class="navbar-nav  flex-column text-right mt-3 p-1">
                        <li class="nav-item mb-2">
                            <a href="index.php" class="nav-link text-white customlihamid <?php if($a==1){echo "active";} ?>"><i
                                        class="fas fa-home fa-lg text-light ml-3"></i>dashboard</a>
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" href="javascript:" data-parent="#menu" data-toggle="collapse"
                               class="accordion-toggle nav-link text-white customlihamid <?php if($a==2){echo "active";} ?>" data-target="#tickets">
                                <i class="fas fa-user fa-lg text-light ml-3"></i>manage users
                                <span class="float-left"><i class="fas fa-angle-down"></i></span>
                            </a>

                            <ul class="collapse list-unstyled mt-2 mr-1 pr-2" id="tickets">
                                <li class="nav-item mb-2">
                                    <a href="create-user.php" class="nav-link text-white customlihamid"><i class="fas fa-user-plus fa-lg text-light ml-3"></i>add user</a>
                                </li>

                                <li class="nav-item mb-2">
                                    <a href="#" class="nav-link text-white customlihamid"><i class="fas fa-user-times fa-lg text-light ml-3"></i>delete user</a>
                                </li>

                            </ul>
                        </li>

                    </ul>

Also, remember to include the following CSS styles:

.customlihamid {
    transition: all .4s;
}

.customlihamid:hover {
    background-color: #8a8a8a;
    border-radius: 5px;
    color: #00cc99;
}
.nav-item > .nav-link.active  {
    background-color: #00cc99;
    border-radius: 7px;
    box-shadow: 5px 7px 10px #111;
    transition: all .3s;
}
.nav-item > .nav-link.active:hover  {
    background-color: #8eccc1;
    border-radius: 7px;
    box-shadow: 5px 7px 20px #111;
    transform: translateY(-1px);
}

Lastly, don't forget to implement the JavaScript functionality:

$(document).ready(function () {
   $('.navbar-nav .nav-link').click(function(){
      $('.navbar-nav .nav-link').removeClass('active');
      $(this).addClass('active');
   })
});

Before adding the JavaScript code, make sure to test your work without it to understand its purpose.

Imagine we're working with a menu structure like this:

<div class="menu">
  <a href="link1.html">Link 1</a>
  <a href="link2.html">Link 2</a>
  <a href="link3.html">Link 3</a>
  <a href="link4.html">Link 4</a>
</div>

Let's assume our current URL is https://demosite.com/link1.html

The function below can be used to dynamically add an "active" class to the link in the menu that corresponds to our current URL:

let currentURL = window.location.href;

document.querySelectorAll(".menu a").forEach(item => {
  if(currentURL.indexOf(item.getAttribute("href")) !== -1){
    item.classList.add("active");
  }
})

To start, assign unique identifiers to all your links and create a CSS class named active:

<ul>
    <li><a id="link1" href="#/...">link 1</a></li>
    <li><a id="link2" href="#/...">link 2</a></li>
</ul>

CSS:

.active {
    font-weight: bold;
}

Using Jquery:

function setActiveLink(setActive){
    if ($("a").hasClass('active'))
        $("a").removeClass('active');
    if (setActive)
        $("#"+setActive).addClass('active');
}

$(function() {
    $("a").click(function() {
        setActiveLink(this.id);
    });
});

Using Vanilla JavaScript:

To avoid selecting excess links with document.querySelectorAll, assign an id of menuLinks to the parent element. Include an onClick handler on the links.

<ul id="menuLinks">
    <li><a id="link1" href="#/..." onClick="setActiveLink(this.id);">link 1</a></li>
    <li><a id="link2" href="#/..." onClick="setActiveLink(this.id);">link 2</a></li>
</ul>

JavaScript Code:

function setActiveLink(setActive){
    var links = document.querySelectorAll("#menuLinks a");
    Array.prototype.map.call(links, function(e) {
        e.className = "";
        if (e.id == setActive)
            e.className = "active";
    })
}

It's important to reference the current element rather than all elements that match your selector.

$("#mainMenu td").click(function() {
$(this).css('background-color', '#EDEDED');

});

Consider using CSS classes instead of directly setting CSS properties.

For example, you can do this:

$("#mainMenu td").click(function() {
$(this).addClass('selected');

});

And add the following CSS:

#mainMenu td.selected {

background-color: #EDEDED; }

Give this a try (Make sure to copy and paste):

Sample.html:-

<html>
 <link rel="stylesheet" type="text/css" href="custom-style.css">
 <a class="food" href="#">Home</a></span>
 <a class="food"  href="#">About</a></span>
 <a class="food"  href="#">Contact</a></span>
</html>

custom-style.css:-

a:link{
 color:blue;
}

a:visited{
 color:purple;
}

a:hover{
 color:orange;
}
a:focus{
color:green;
}

a:active{
 color:red;
}

a:active{
 color:yellow;
}

Here is another approach using a simple 2-line listener

$( ".menu_button" ).click(function() {

    $( ".menu_button" ).removeClass('menu_button_highlight');
    $(this).addClass('menu_button_highlight');
});

=====

    <a class='menu_button' href='#admin'>Admin</a>
    <br/>

    <a class='menu_button' href='#user_manager'>User Manager</a>
    <br/>

    <a class='menu_button' href='#invite_codes'>Invite Codes</a>

====

.menu_button {

    padding: 0 5px;
}

.menu_button_highlight {

    background: #ffe94c;
}

After reading @Sampson's solution, I decided to tackle the problem in the following manner -

HTML:

1. Each page contains a div with a class of content, holding the specific content for that page while keeping header and footer separate.
2. To differentiate each page, I assigned a unique class within the content div. For example, for a 'CONTACT US' page, the structure would be:

   <section class="content contact-us"></section>

   .
3. This setup allows me to write targeted CSS for individual pages within a single style.css file.

<body>
    <header>
        <div class="nav-menu">
            <ul class="parent-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact us</a></li>
                ...
            </ul>
        </div>
    </header>

    <section class="content contact-us">
        Content for contact us page goes here
    </section>

    <footer> ... </footer>

</body>

CSS:

1. I created a universal active class containing styling for active menu items.

.active {
    color: red;
    text-decoration: none;
}

<body>
    <header>
        <div class="nav-menu">
            <ul class="parent-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact us</a></li>
                ...
            </ul>
        </div>
    </header>

    <section class="content contact-us">
        Content for contact us page goes here
    </section>

    <footer> ... </footer>

</body>

JavaScript:

1. In JavaScript, I compare the menu link text with the unique class name defined in HTML using jQuery.
2. Firstly, I format all menu texts to lowercase and replace spaces with hyphens to match the class name.
3. If the content class matches the menu text (lowercase without spaces), the active class is applied to the menu item.

var $allMenu = $('.nav-menu > .parent-nav > li > a');
var $currentContent = $('.content');
$allMenu.each(function() {
  $singleMenuTitle = $(this).text().replace(/\s+/g, '-').toLowerCase();
  if ($currentContent.hasClass($singleMenuTitle)) {
    $(this).addClass('active');
  }
});

.active {
  color: red;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>;

<body>
  <header>
    <div class="nav-menu">
      <ul class="parent-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact us</a></li>
        ...
      </ul>
    </div>
  </header>

  <section class="content contact-us">
    Content for contact us page goes here
  </section>

  <footer> ... </footer>

</body>

Reasoning Behind This Approach:

1. @Sampson's method was effective, but I found myself consistently adding new code for each page. My approach streamlines this process.
2. In my project, the body tag resides in the header.php file, preventing unique class names on a per-page basis.