changing link through javascript through css class

[bleustreak12]

i want to change the link of a menu item when another menu item is active in another menu

 

ie.suppose i have menu a with link home and menu b with link map

 

now if i am on the home page and the home link is active i want the color of the map link to change and maybe some other property of the link.

 

Now i want to change this not by using

 

<script type="text/JavaScript">

 

{

document.getElementById("theImage").style.height="100%";

document.getElementById("theImage").style.width="auto";

}

 

but by trying to access the class of the div(not the id)

 

 

how can i achieve this

[haku]

It's not as straightforward unfortunately (actually, there is a getElementsByClass function, but I don't think it's supported by all browsers).

 

var divs = document.getElementByTagName("div")
for(var i = 0; i < divs.length; i++)
{
  if(divs[i].getAttribute('class') == 'targetClassName')
  {
    a = divs[i].getElementsByTagName('a')
    a[0].setAttribute('href', 'target/href.html')
  }
}

 

(this will change the href of the first a tag in any div with a class name of "targetClassName" to target/href.html.

[haku]

I should add, you could use getElementsByClassName() for browsers that support it, and the code above for other browsers (IE):

 

if(getElementsByClassName)
{
  // use that function
}
else
{
  // use the code in the post above this one
}