Highlight the active link in a navigation menu

**Rain Lover** · 01-02-2014, 12:08 PM

I wonder if the script is all right. Please review my code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style>
ul {list-style-type:none; margin:0; padding:0;}
li {display:inline;}
a.active {background:red;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.example.com/home">Home</a></li>
<li><a href="http://www.example.com/news">News</a></li>
<li><a href="http://www.example.com/contact">Contact</a></li>
<li><a href="http://www.example.com/about">About</a></li>
</ul>
<script>
for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href == document.URL) {
        document.links[i].className = 'active';
    }
}
</script>
</body>
</html>

It should highlight the current page link in the navigation bar.

**tonybabb** · 01-04-2014, 02:55 AM

I think that should be a colon not a period. Try changing a.active to a:active.

**Nile** · 01-04-2014, 03:22 AM

@tonybabb: No it shouldn't. He's trying to use active as a classname for the current link that the client is on in the web page, not a cursor position.

@OP: Javascript really isn't ideal for situations like these. Is there a reason, in particular, that you're using Javascript and not server side. Server side, I usually set a body class to the page's identifier (e.g., "home", "contact", "about"), and give each link the same class. That way you can target the links via the body:

Code:

body.contact ul li.contact a
{
    // link active/current
}

However, if you really want to use Javascript, what you're doing should essentially be working. The issue may be that there's a trailing slash in some scenarios. Use Javascript to detect if a trailing slash is there or not, then remove it if it is there (or just use a regex to match everything but the slash). If that doesn't work, log the document url and the link url to the console, and compare it manually to debug the issue. If you need help doing that (after you've tried removing the slash via Javascript), reply back with what you've tried and I'll try to troubleshoot it for you.

**Rain Lover** · 01-04-2014, 03:48 AM

Originally Posted by Nile

However, if you really want to use Javascript, what you're doing should essentially be working.

Hi Nile and thanks for the answer!
Yes it seems to work. However, there's one thing I don't know how to do: my site landing page and Home are the same. In other words, http://www.example.com/ and http://www.example.com/home go to the same page. Now if a visitor goes to http://www.example.com/ my scipt fails. To resolve the issue I tried this:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style>
ul {list-style-type:none; margin:0; padding:0;}
li {display:inline;}
a.active {background:red;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.example.com/home">Home</a></li>
<li><a href="http://www.example.com/news">News</a></li>
<li><a href="http://www.example.com/contact">Contact</a></li>
<li><a href="http://www.example.com/about">About</a></li>
</ul>
<script>
for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href == document.URL) {
        document.links[i].className = 'active';
    } else {document.links[0].className = 'active';}
}
</script>
</body>
</html>

But it doesn't work. Example:
https://googledrive.com/host/0B5jOXz...DWm8/menu.html

Any thoughts?

**Nile** · 01-04-2014, 04:04 AM

If "home" just redirects to the index, why don't you just make the link to "home" the index? For example:

Code:

<li><a href="http://www.example.com/">Home</a></li>

Anyways, to fix this issue the hard way (strictly for learning purposes... not recommended, go with what I said above), you'd do something like:

Code:

for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href === document.URL || (document.URL === "http://example.com/" && document.links[i].href === "http://example.com/home")) {
        document.links[i].className = 'active';
    }
}

Of course, apply whatever mechanism you use to deal with optional trailing slashes.

**Rain Lover** · 01-04-2014, 04:25 AM

Originally Posted by Nile

If "home" just redirects to the index, why don't you just make the link to "home" the index? For example:

Code:

<li><a href="http://www.example.com/">Home</a></li>

No, Home doesn't always redirect to a single URL: it can be seen with either http://www.example.com/ or http://www.example.com/.

Thanks for the snippet!