Highlighting the current page in a summary
How to highlight the active page in a list of links? By comparing the URL in the list with the URL of the current page.
By active page, I
designate the current page, not to be confused with the active link designated by the CSS pseudo class :active that is the link on which you click the mouse button.
To determine whether a link in a list corresponds to the current page, you need JavaScript.
To obtain the URL of the current page, the location object and the href property are used.
var pageurl = location.href;
Demonstration (clic to display the URL of this page).
The style of the current page in the list is modified for example by displaying the anchor in bold or underline. We can also increase the size, add an offset...
pageactive.style.fontWeight = "bold";
Remain to select the current page in a list of links...
The complete JavaScript code:
<script>
function highlight()
{
var pageurl = location.href;
var dnl = document.getElementsByTagName("a");
for(i = 0; i < dnl.length;i++)
{
var x = dnl.item(i);
if(x.href == pageurl)
{
x.style.fontWeight = "bold";
x.style.textDecoration = "underline";
}
}
}
window.onload=highlight;
</script>
Demonstration on a summary:
The practical application is the pagination of articles, on which a reflection must be made because it has implications for search engines.