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