To make the implementation smoother, considering the utilization of JavaScript would be beneficial ... Below is a demonstration using JQuery script ... As previously pointed out by others ... we are utilizing a class called 'active' to signify the active tab - NOT the pseudo-class ':active.' Nevertheless, it could have been named anything else such as selected, current, and so forth.

/* Styling with CSS */

#nav { width:480px;margin:1em auto;}

#nav ul {margin:1em auto; padding:0; font:1em "Arial Black",sans-serif; }

#nav ul li{display:inline;} 

#nav ul li a{text-decoration:none; margin:0; padding:.25em 25px; background:#666; color:#ffffff;} 

#nav ul li a:hover{background:#ff9900; color:#ffffff;} 

#nav ul li a.active {background:#ff9900; color:#ffffff;} 

/* Example Using JQuery */

<script type="text/javascript">
$(function (){

    $('#nav ul li a').each(function(){
        var path = window.location.href;
        var current = path.substring(path.lastIndexOf('/')+1);
        var url = $(this).attr('href');

        if(url == current){
            $(this).addClass('active');
        };
    });         
});

</script>

 /* HTML Structure */

<div id="nav" >
    <ul>
        <li><a href='index.php?1'>One</a></li>
        <li><a href='index.php?2'>Two</a></li>
        <li><a href='index.php?3'>Three</a></li>
        <li><a href='index.php?4'>Four</a></li>
    </ul>
</div>

Apologies for the delayed response, but tackling this question is actually quite simple. All you need to do is designate multiple tab classes in your CSS file, and then specify the required tab as your class in the PHP file when creating the LI tag.

Let me demonstrate how you can achieve this solely on the server side:

CSS

html ul.tabs li.activeTab1, html ul.tabs li.activeTab1 a:hover, html ul.tabs li.activeTab1 a  { 
    background: #0076B5;
    color: white;
    border-bottom: 1px solid #0076B5;
}

html ul.tabs li.activeTab2, html ul.tabs li.activeTab2 a:hover, html ul.tabs li.activeTab2 a {
    background: #008C5D;
    color: white;
    border-bottom: 1px solid #008C5D;
}

PHP

<ul class="tabs">
    <li <?php print 'class="activeTab1"' ?>>
        <a href="<?php print 'Tab1.php';?>">Tab 1</a>
    </li>

    <li <?php print 'class="activeTab2"' ?>>
        <a href="<?php print 'Tab2.php';?>">Tab 2</a>
    </li>
</ul>

If you're looking to update the color of the currently highlighted link/tab, the most effective approach is to assign a class (such as active) to the active link/tab and customize its styling.

For instance, your CSS could look like:

li.active, a.active {
  background-color: #f90;
}

My approach involves utilizing PHP to identify the URL and match the page name (excluding the .php extension). By adding a common word like "contact" to multiple pages, each with the same class, I can easily add additional CSS properties using PHP.

To implement this method, it is necessary to save your pages with the file extension .php.

Below is a demonstration. Customize the links and pages according to your requirements. The CSS class assigned to all links is .tab, with an additional class called .currentpage for the active link (following the PHP function), providing a space to override your CSS styles. Feel free to assign any names you prefer.

<?php # Utilizing REQUEST_URI
    $currentpage = $_SERVER['REQUEST_URI']; ?>
<div class="nav">
    <div class="tab
         <?php
             if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
                 echo " currentpage";
         ?>"><a href="index.php">Home</a>
     </div>
     <div class="tab
         <?php
             if(preg_match("/services/i", $currentpage))
                 echo " currentpage";
         ?>"><a href="services.php">Services</a>
     </div>
     <div class="tab
         <?php
             if(preg_match("/about/i", $currentpage))
                 echo " currentpage";
         ?>"><a href="about.php">About</a>
     </div>
     <div class="tab
         <?php
             if(preg_match("/contact/i", $currentpage))
                 echo " currentpage";
         ?>"><a href="contact.php">Contact</a>
     </div>
 </div> <!--nav-->

Give this a try. This code will maintain the color of an item until another one is selected.

<style type="text/css>

.activeElem{
 background-color:lightblue
}       
.desactiveElem{
 background-color:none
}       

}

</style>

<script type="text/javascript>
var activeElemId;
function activateItem(elemId) {
 document.getElementById(elemId).className="activeElem";
 if(null!=activeElemId) {
   document.getElementById(activeElemId).className="desactiveElem";
 }
 activeElemId=elemId;

}
</script>

<li id="aaa"><a href="#" onclick="javascript:activateItem('aaa');">AAA</a>
<li id="bbb"><a href="#" onClick="javascript:activateItem('bbb');">BBB</a>
<li id="ccc"><a href="#" onClick="javascript:activateItem('ccc');">CCC</a>

If you're looking for a simple CSS solution, I have one that I currently use.

Start by assigning a unique ID or class to your webpage and menu items, then implement the following code:

HTML:

<html>
    <body id="unique_id_here">
        <ul class="menu">
            <li id="menu_item1">Item 1</li>
            <li id="menu_item2">Item 2</li>
            <li id="menu_item3">Item 3</li>
        </ul>
        ...
    </body>
</html>

CSS:

.menu li:hover,
#unique_id_here #menu_item1,
#unique_id_here #menu_item2,
#unique_id_here #menu_item3 {
    background-color: #f90;
}

Finally, with the assistance of everyone and a helpful post titled How to change link style onclick, I was able to achieve my goal. Below is the JavaScript code I used to accomplish this task.

<html>
    <head>
        <style type="text/css">
            .item {
                width:900px;
                padding:0;
                margin:0;
                list-style-type:none;
            }

            a {
                display:block;
                width:60;
                line-height:25px; /*24px*/
                border-bottom:1px  none #808080;
                font-family:'arial narrow',sans-serif;
                color:#00F;
                text-align:center;
                text-decoration:none;
                background:#CCC;
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                margin-bottom:0em;
                padding: 0px;
            }

            a.item {
                float:left;        /* For horizontal left to right display. */
                width:145px;       /* For maintaining equal  */
                margin-right: 5px; /* space between two boxes. */
            }

            a.selected{
                background:orange;
                color:white;
            }
        </style>
    </head>
    <body>
        <a class="item" href="#" >item 1</a>
        <a class="item" href="#" >item 2</a>
        <a class="item" href="#" >item 3</a>
        <a class="item" href="#" >item 4</a>
        <a class="item" href="#" >item 5</a>
        <a class="item" href="#" >item 6</a>

        <script>
            var anchorArr=document.getElementsByTagName("a");
            var prevA="";
            for(var i=0;i<anchorArr.length;i++)
            {
                anchorArr[i].onclick = function(){
                    if(prevA!="" && prevA!=this)
                    {
                        prevA.className="item";
                    }
                    this.className="item selected";
                    prevA=this;
                }
            }
        </script>
    </body>
</html>