change css class when click link 1

[VBAPrincess]

I know there is probably an easy answer to this but I'm tired of spinning my wheels. I've got a frames page with the nav link on the right side that will determine the content of the center frame. When a user clicks the link "FAQ", the center frame will populate with faq.html. What I'd like to do is change the style for the FAQ link when it's clicked, so the user knows they are on the FAQ page. But, I also want to be sure the other ten links are set to the original style.

In testing this code (using multiple window.alerts to see what's happening), I've found that the loop does not appear to be running ... or I should say it runs once. All of the 11 links have an id = frlinkX, where X is a number.

Here's my code:
function change(objNum){
var objName = "frlink"
window.alert(objNum)
for (i = 1; i <= 11; i++)
{
if (objNum == i)
{
document.getElementByID(objName+i).className = "franchlinksel";
window.alert("A: "+objName+i)
}
else
{
document.getElementByID(objName+i).className = "franchlinks";
window.alert("B: "+objName+i)
}
}
}
</script>

Here's one of the links:
<p><a href="franchise_info.html" target="content" id="frlink1" name="frlink1" onclick="change(1);" class="franchlinks">Introduction</a><br />

I'm wondering if my problem is multiplied here because I am not doing the right combination of things. I've tried using a linked css file versus no linked file. I've used a span tag around the <a href> which has the class definition.

Is there a better way to do this or can what I have be fixed?

TIA!

Diana
VBA Princess
-- I'm hoping to grow up to be a Goddess!

 

[kaht]

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

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[VBAPrincess]

Thank you so much!!! Your code worked like a charm!



Diana
VBA Princess
-- I'm hoping to grow up to be a Goddess!

 

[VBAPrincess]

kaht

I've tried adding this same code to another page and when I click a link it takes forever and eventually IE gives me a message:
A script on this page is causing IE to run slowly. If it continues to run, it may cause your computer to become unresponsive. Do you want to abort the script?

I did the code exactly like I did on my other page. Any ideas?

Here's links to both pages:

http://www.dcappwerx.com/mazzios/fr_franchise.html

(works)

http://www.dcappwerx.com/mazzios/fr_about.html

(doesn't work)

Diana
VBA Princess
-- I'm hoping to grow up to be a Goddess!