navbar link colors with javascript instead of css

**acan123** · 08-27-2010, 06:52 PM

Hi,

I'm trying to use javascript to alter the color of some navbar links so that when a certain page of the site is open then the color of the corresponding link is changed to green.

The reason that I'm not using CSS to do this is that I'm modifying another company's template, and they will not allow me to insert a "current" id into the body tag of their html pages.

They will allow me to add a reference to an external javascript file, so I'm trying to achieve with javascript what would normally be done with CSS.

I'm a beginner with javascript, but have tried to piece together information from various sources. As it is right now the color of the links are not changing to green. I've set up this test file below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css">
#home{
	color:#999;
}
#about{
	color:#999;
}
#contact{
	color:#999;
}
#anchor_to_green{
	color:#090;
}
</style>

<script  type="text/javascript">
window.onload = onHrefAnchor;

function onHrefAnchor(){
	var page_href = window.location.href;
	var navbar_ul = document.getElementById("navbarList");
	var navbar_anchors = navbar_ul.getElementsByTagName("a");
	var anchor_id0 = navbar_anchors[0].getAttribute("id");
	var anchor_id1 = navbar_anchors[1].getAttribute("id");
	var anchor_id2 = navbar_anchors[2].getAttribute("id");
	if(page_href=="file:///C:/Documents%20and%20Settings/alex/Desktop/NavBarTest082710/home.html"){
		anchor_id0.setAttribute("id","anchor_to_green");
	}
	if(page_href=="file:///C:/Documents%20and%20Settings/alex/Desktop/NavBarTest082710/about.html"){
		anchor_id1.setAttribute("id","anchor_to_green");
	}
	if(page_href=="file:///C:/Documents%20and%20Settings/alex/Desktop/NavBarTest082710/contact.html"){
		anchor_id2.setAttribute("id","anchor_to_green");
	}
}
</script>
</head>

<body>
<ul id="navbarList">
	<li><a href="home.html" id="home">Home</a></li>
    <li><a href="about.html" id="about">About</a></li>
    <li><a href="contact.html" id="contact">Contact</a></li>
</ul>
<p>Home Page</p>
</body>
</html>

I'm hoping that someone with more JS experience can help me. Any advice on how to get this to work would be greatly appreciated.

Alex

**jscheuer1** · 08-28-2010, 07:07 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css">
#navbarList a {
	color:#999;
}
#navbarList a#anchor_to_green{
	color:#090;
}
</style>
<script type="text/javascript">
window.onload = onHrefAnchor;

function onHrefAnchor(){
	var navbar_anchors = document.getElementById('navbarList').getElementsByTagName('a'),
	i = navbar_anchors.length - 1;
	for (i; i > -1; --i){
		if(navbar_anchors[i].href === location.href){
			navbar_anchors[i].id = 'anchor_to_green';
		}
	}
}
</script>
</head>

<body>
<ul id="navbarList">
	<li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
<p>Home Page</p>
</body>
</html>

**acan123** · 08-30-2010, 01:01 PM

John,

Thanks so much for your reply. I'm going to try the modified script that you sent me, and I'll let you know how it goes.

Alex

Thread: navbar link colors with javascript instead of css

Thread Tools

Search Thread

navbar link colors with javascript instead of css

Bookmarks

Bookmarks

Posting Permissions