navbar link colors with javascript instead of css [Archive]

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:

<!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

<!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>