0 Replies - 6124 Views - Last Post: 16 January 2016 - 01:26 PM

#1 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6339
  • View blog
  • Posts: 25,561
  • Joined: 12-December 12

Format Current Page's Link

Posted 16 January 2016 - 01:26 PM

It is common to want to format the link that points to the current page differently to other links. This should be done server-side because then it would only need to be written once and can be applied across many pages using server-side includes.

This snippet shows how to achieve this with Javascript. This Javascript would then need to be copied to other relevant pages.

<script type="text/javascript">
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
// remove hash or querystring
page = page.split(/[#?]/)[0];

var theLIs = document.querySelectorAll('nav li');

for (var i = 0; i < theLIs.length; i++) {
    var theA = theLIs[i].getElementsByTagName('a')[0];
    if (theA && theA.href.indexOf(page) > -1) {
        theLIs[i].className += ' current';
        break;
    }
}
</script>


Place this script at the bottom of the page, before the closing body tag. Then add CSS for the class-name 'current' to apply your formatting. The code looks for the link in your navbar that refers to the current page. It applies the class-name to the containing li element, but could be modified slightly to apply this to the a-tag itself.

Attached Image

var url = window.location.href; Read the current page's location.

var page = url.substr(url.lastIndexOf('/')+1); Locate the current page from the address, the part after the last '/'. For my example, this is 'thisone.html'.

page = page.split(/[#?]/)[0]; Remove any hash or querystring after the page name, so 'thisone.html#blah' would become 'thisone.html'.

var theLIs = document.querySelectorAll('nav li'); Get a collection of all the li's in the navbar. 'nav li a' could be used to target the a-links directly.

Then we loop through these li's, reading each's a-link (if there is one).

if (theA && theA.href.indexOf(page) > -1) { For an existing a-link, check if its href contains the current page.

theLIs[i].className += ' current'; If so, add our class name.

Remove the break statement if the link might occur more than once.

Here is a full page to demonstrate, which should be named 'thisone.html'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Format Current Link</title>
</head>
<style type="text/css">
li {
    display: inline;
}
a {
    padding: 10px;
}
.current {
    background-color: green;
}
</style>
<body>
<h1>Format Current Page&apos;s Link</h1>
<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="thisone.html">This One</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
<script type="text/javascript">
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
// remove hash or querystring
page = page.split(/[#?]/)[0];

var theLIs = document.querySelectorAll('nav li');

for (var i = 0; i < theLIs.length; i++) {
    var theA = theLIs[i].getElementsByTagName('a')[0];
    if (theA && theA.href.indexOf(page) > -1) {
        theLIs[i].className += ' current';
        break;
    }
}
</script>
</body>
</html>


I have another snippet (using jQuery) that instead adds the class-name to the top-level of a multi-level navbar:

[JQuery] Style Top-Level Of Multi-Level Navbar

Is This A Good Question/Topic? 0
  • +

Page 1 of 1