Changing the Color of the Current Page Link with CSS

Manipulating the appearance of the current page link is a common CSS styling requirement. To distinguish it from other page links, users often prefer to swap the colors of the text and background. Here's a comprehensive solution for your styling request:

CSS Styling

To style the current page link, add the following CSS rules to your stylesheet:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

jQuery Script

The provided jQuery script allows you to identify the current page link and dynamically add a class to it:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Depending on your specific page structure, you may need to refine the selector for links ($("[href]")). For example, if the links are contained within a nav element, you can narrow down the selection to $("nav [href]").

If your page uses URL parameters, you can remove them before comparing the links to ensure that the current page link is recognized:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

This approach eliminates the need to modify the CSS styling for each page individually.