Highlight current page

**Peter Johnson** · 07-05-2007, 04:21 PM

I am trying to have a page that will highlight - in the navigation bar - the page you are currently on. What I want is a javascript that will extract the page's URL as a string, and if it matches the url in the href, it will apply the class .current to it.

I found a way that looks like it should do exactly this, at http://blog.richnetapps.com/index.ph...&c=1&tb=1&pb=1 and it seems like it should work, but... it doesn't.

Can anyone tell me what I've done wrong? Thanks. BTW, I've also tried calling the script in a onload function, but it still didn't work.

Code:

<html>
<head>
<style>
.current {background-color:red;}
</style>

</head>
<body>

<script language="text/javascript">
function extractPageName(hrefString)
{
  var arr = hrefString.split('.');
  arr = arr[arr.length-2].split('/');
  return arr[arr.length-1].toLowerCase();		
}

function setActiveMenu(arr, crtPage)
{
  for(var i=0; i < arr.length; i++)
  if(extractPageName(arr[i].href) == crtPage)
  {
    arr[i].className = 'current';
    arr[i].parentNode.className = 'current';
  }
}

function setPage()
{
  if(document.location.href) 
    hrefString = document.location.href;
      else
    hrefString = document.location;

    if (document.getElementById('navbar')!=null)
    setActiveMenu(document.getElementById('navbar').getElementsByTagName('a').extractPageName(hrefString));
}
</script>	

<div id="navbar">
<a href="one.htm">one</a>
<a href="two.htm">two</a>
<a href="three.htm">three</a>
</div>

<script  language="text/javascript">setPage()</script>
</body>
</html>

**Trinithis** · 07-05-2007, 04:39 PM

Put this at the bottom of your page (or after your nav or whatever):

Code:

<script type="text/javascript">

var anchors  = document.getElementsByTagName("a");
var uri = encodeURI(window.location.href).toLowerCase();
for(var i=0, n=anchors.length; i<n; ++i) {
	if(uri==encodeURI(anchors[i].href).toLowerCase()) {
		anchors[i].style.className += " current ";
		break;
		}
	}

</script>

**Peter Johnson** · 07-05-2007, 05:28 PM

Thank you for the fast reply. I tried that, saved the page as one.htm, but it's still not turning the link for one.htm red. Any idea why not?

Code:

<html>
<head>
<style>
.current {background-color:red;}
</style>
</head>
<body>
<div id="navbar">
<a href="one.htm">one</a>
<a href="two.htm">two</a>
<a href="three.htm">three</a>
</div>
<script type="text/javascript">
var anchors  = document.getElementsByTagName("a");
var uri = encodeURI(window.location.href).toLowerCase();
for(var i=0, n=anchors.length; i<n; ++i) {
	if(uri==encodeURI(anchors[i].href).toLowerCase()) {
		anchors[i].style.className += " current ";
		break;
		}
	}
</script>
</body>
</html>

**Peter Johnson** · 07-05-2007, 06:05 PM

OK, I just got it to work by changing the third from last line from

anchors[i].style.className += " current ";

to

anchors[i].className += " current ";

But I would have thought that the first way was correct. Any ideas why it works without the .style. ??

**Trinithis** · 07-05-2007, 06:19 PM

Oops, yeah, it should be without style.

The reason is that the class attribute is placed in the tag itself, not directly into the style. For example:

Code:

<div class="current">...</div>

vs.

Code:

<div style="class:current;">...</div>

See the difference?

**Peter Johnson** · 07-05-2007, 07:05 PM

That makes sense. Thank you again.

**agallo33** · 10-03-2008, 09:27 PM

Luckily I was able to find this post because I currently have the code in the post working. However, I am curious how you would set a default highlight tab for my index page when users first come to my site?

Currently when you go to my domain none of the pages are listed as active. I assume this is because index.php is hidden in the url initially?

I've hit a wall on this one and really appreciate any thoughts on this!

**bitsy** · 02-14-2011, 09:53 PM

Hi agallo33 - did you get a solution for this problem - two years ago + !
I have similar problem - all highlighted except index ?

**bitsy** · 02-14-2011, 09:55 PM

Hi Trinithis,
The javascript for the bottom of the page makes the rest work a treat. Any ideas re getting the index page to highlight too? It's in the navigation as well as header.
thanks in advance.

Thread: Highlight current page

Thread Tools

Search Thread

Highlight current page

how would i set a default page as active

Bookmarks

Bookmarks

Posting Permissions