a:active
: triggered when a link is clicked and held down.
a:visited
: indicates that the link has been visited before.
To highlight the link corresponding to the current page, you can define a specific style for that link -
.current {
color: red;
background-color: #000000;
}
Add the new class .current
only to the relevant li
(link), either on server-side or client-side using javascript/jquery.
You can utilize JQuery's .each function to iterate through the links with the code below:
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("current");
}
});
});
Depending on your website's structure and linked pages, you may need to narrow down the selectioon of links like this:
$("nav [href]").each ...
If you are using URL parameters, it might be necessary to remove these for comparison:
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This method saves you from having to manually edit every page.
source