change css class when click link part 2

[73pixieGirl]

Hello...I searched the old posts and found the following code (see below) and this works great for what I'm doing, but I need some help modifying the function. What I'd like is for each <a> to have an id, then based on which link is clicked, I'd like for that id to be selected which will change class='selected'. I added an id tag to each <a>, I put 'id' in place of 'this' (onclick="highlightLinks(id)"), I put an alert in the function to make sure it recognizes that id (and it does), then I tried to modify this line:
var linkList = document.getElementById("navigationDiv").getElementsByTagName("a"); to include the id element, but I can't get it to work.

The reason I need an id is b/c I'm only working with one body tag in a template, with XML pages being pulled into that template. Because different pages are being pulled into the template, each time the page is called the focus of which link was clicked gets lost. So I'm thinking if I send an id to the function, then say if(obj == id) then set that class to 'selected' it will always know which link was clicked.

So here's the original code I found from an old post:

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

Did I explain that well enough?
Thank you!

 

[kaht]

then I tried to modify this line: var linkList = document.getElementById("navigationDiv").getElementsByTagName("a"); to include the id element, but I can't get it to work.

That isn't the line that determines which one was selected in the original code, it's the line that generates the array of links so that they can all be set back to empty class status (thus, clearing any previously highlighted links)

The line that you'll need to change is this one:

obj.className = "selected";

Instead of referencing obj.className, you'll need to use document.getElementById("whatever").className

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

 

[BabyJeffy]

I really don't understand what it is you want to do.

Why don't you post your code (that is relevant) and describe your scenario. Explain what will happen when you click a link that is already selected... that is not already selected. What happens to the currently selected link when you click another link.

Maybe it's the time of day - my brain hurts

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[73pixieGirl]

Ok, here's what I'm working with:

<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(id) {
alert("this is: " + id);
var linkList = document.getElementById("navigationDiv").getElementsByTagName("a");
for (i = 0; i &lt; linkList.length; i++) {
linkList.className = "";
}
document.getElementById("id").className = "selected";
}
</script>

<div id="navigationDiv">
<a href="resources_alpha" id="resources_alpha" onclick="highlightLinks(this.id)">Alphabetical List</a> | <a href="resources_by_subject" id="resources_by_subject" onclick="highlightLinks(this.id)">By Subject</a> | <a href="resources_by_vendor" id="resources_by_vendor" onclick="highlightLinks(this.id)">By Vendor</a>
</div>

I tried the document.getElementById("id").className = "selected" and still can't get it to work.

My brain hurts too...

 

[BabyJeffy]

Try this replacement...

...
function highlightLinks(l_oId)
{
   alert("this is: " + l_oId);
   clearLinks();
   document.getElementById(l_oId).className = "selected";
};

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

Let us know how that goes.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[73pixieGirl]

Thanks for your help BabyJeffey...but it's still not working. This week isn't starting off so good...

 

[tsuji]

[1]
>document.getElementById("id").className = "selected";
[tt]document.getElementById([highlight]id[/highlight]).className = "selected";[/tt]
[2]
You not only add the id but also materially change the href attribute. If the hyperlink points to some other url resource, you might want to set target to some new window otherwise you are not going to view the same page and are navigating away - hence, style being "selected" or not does not matter any more.
[tt]
<a href="resources_alpha" id="resources_alpha" onclick="highlightLinks(this.id)" [blue]target="_blank"[/blue]>Alphabetical List</a> | <a href="resources_by_subject" id="resources_by_subject" onclick="highlightLinks(this.id)" [blue]target="_blank"[/blue]>By Subject</a> | <a href="resources_by_vendor" id="resources_by_vendor" onclick="highlightLinks(this.id)" [blue]target="_blank"[/blue]>By Vendor</a>[/tt]

 

[73pixieGirl]

Thanks tsuji! When I set the target="_blank", a new page opens, but the "document.getElementById(id).className = "selected";" finally worked on the old page (but obviously the requested data opened in a new window). What is causing the initial page to finally change? And how can I keep it like that without opening a new browser window?
TIA!

 

[tsuji]

If you want mimic the orginal script, just add the id and keep the href="#"? You might add some other functionality to the onclick handler to do some stuff. I don't know...