change then remove class with javascript

[remp]

Hello guys, i have a small question:

i have the following code which i use to change the class for selected state on a navigation bar:

<style type="text/css">

#navigationDiv a {
   text-decoration:none;
   display:block;
   color:black;
   margin-bottom:5px;
}



#navigationDiv a.selected {
   text-decoration:underline;
}

</style>

<script type="text/javascript">

function highlightLinks(obj) {
   var linkList = document.getElementById("navigationDiv").getElementsByTagName("a");
   for (i = 0; i < linkList.length; i++) {
      linkList[i].className = "";
   }
   obj.className = "selected";
}

</script>

<div id="navigationDiv">
<a href="#" onclick="highlightLinks(this)" class="">anchor1</a>
<a href="#" onclick="highlightLinks(this)" class="">anchor2</a>
<a href="#" onclick="highlightLinks(this)" class="">anchor3</a>
<a href="#" onclick="highlightLinks(this)" class="">anchor4</a>
<a href="#" onclick="highlightLinks(this)" class="">anchor5</a>
<a href="#" onclick="highlightLinks(this)" class="">anchor6</a>
<a href="#" onclick="highlightLinks(this)" class="">anchor7</a>
<a href="#" onclick="highlightLinks(this)" class="">anchor8</a>
</div>

Now, my problem is that when i click another link, the previous on stays with the "selected" class, how can i modify the javascript to remove the class after i click on another link?

Thank you in advance for your response.

[Nile]

For me the link loses the class when another link is clicked. What browser are you viewing it in?

[jscheuer1]

Yeah, right. Unless you mean another link somewhere else on the page that isn't there, do you?

[remp]

Thanks for your reply guys. I have posted a link so you can see what im talking about:

http://72.167.86.85/site11/site2/test.html

When i click on the navigation on the right, i want the selected one to stay orange and the other ones to stay black. but they do not change back to black when clicking on another link.

Take a look a the page and give me a hand please. Thank you very much for your assistance.

[jscheuer1]

When I saw the source code of that page I almost had to laugh. Three external script tags to jQuery (fortunately all the same version), and cufon! Cufon has been known to mess things up and cannot be tested in a local mock up without downloading all of the fonts. There are also some script errors.

But it looks like you're not really using cufon, and that even if you are, it might not be a factor (Note: further testing shows cufon is being used and that it does cause problems). The other script errors appear not to affect this one thing.

To get rid of cufon, remove:

	<script type='text/javascript' src='javascript/cufon-yui.js'></script>
	<script type='text/javascript' src='javascript/nevis_700.font.js'></script>

and:

	<script type="text/javascript">
            Cufon.replace('h2, h3, h5, .footer, #nav', { hover: 'true' });
    
    </script>

To make a long story short, the main problem is that you have two elements with the id 'rotator'. In javascript, the parser will at best find the first and use it, at worst throw a fatal script error.

The 'rotator' element without your links in it is first, so the one you want to target never gets processed.

Since you use jQuery, you can get around that by changing:

        <script type="text/javascript">
function highlightLinks(obj) {
   var linkList = document.getElementById("rotator").getElementsByTagName("a");
   for (i = 0; i < linkList.length; i++) {
      linkList[i].className = "";
   }
   obj.className = "selected";
}
</script>

to:

        <script type="text/javascript">
function highlightLinks(obj) {
   var linkList = $('#rotator a');
   for (i = 0; i < linkList.length; i++) {
      linkList[i].className = "";
   }
   obj.className = "selected";
}
</script>

But this is a pretty dirty solution. Considering the rest of the problems with the page, it's perhaps the best that can be hoped for. These other problems should be addressed though.

[remp]

Thanks for you help jscheuer1 (and criticism... hahaha) i don't know that much about jquery and i have to do it this way, but thanks.

I now realize that Cufon does give problems, and it seem by removing it, the links work as intended but I really like what cufon does and i want to keep it, so i may try another way of accomplishing what it does... Thanks