New Topic/Question
Reply
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.
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'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
MultiQuote
| 