Change DIV background - change it back

[admijn]

Hi,
I have the following script which changes the background class of my divs:

<div id="divTest"> 
 <a href="\" onclick="changeClass('divTest', 'myClass01');">1 Lorem ipsum 1</a> 
 <br> 
 <a href="\" onclick="changeClass('divTest', 'myClass02');">2 Lorem ipsum 2</a> 
 <br> 
 <a href="\" onclick="changeClass('divTest', 'myClass03');">3 Lorem ipsum 3</a> 
 <br> 
 <a href="\" onclick="changeClass('divTest', 'myClass04');">4 Lorem ipsum 4</a> 
 </div> 

<script>
 function changeClass(divTest, myClass01) 
 { 
 document.getElementById(divTest).className=myClass01; 
 } 
</script>

But now if I click a link then the previously clicked layer does not change back to it's orginal state.
Can anyone tell me what function I need to use in order to solve this little problem?

[daveVk]

what do you mean by "previously clicked layer" the divTest of the prior call to changeClass maybe ?

[admijn]

I made a mistake in my topicstart...
I mean that when I click divTest1, the class should be myClass01. But when I click divTest2, the class of divTest1 should go back to 'default class'. (which is not defined in this script)

<div id="divTest" onclick="changeClass('divTest', 'myClass01');">1 Lorem ipsum 1 </div>
<script>
function changeClass(divTest, myClass01)
{
document.getElementById(divTest).className=myClass01;
}
</script>
<br>
<div id="divTest2" onclick="changeClass('divTest', 'myClass02');">2 Lorem ipsum 2</div>
<script>
function changeClass(divTest2, myClass02)
{
document.getElementById(divTest2).className=myClass02;
}
</script>
<br>
<div id="divTest3" onclick="changeClass('divTest', 'myClass03');">3 Lorem ipsum 3</div>
<script>
function changeClass(divTest3, myClass03)
{
document.getElementById(divTest3).className=myClass03;
}
</script>
<br>
<div id="divTest4" onclick="changeClass('divTest', 'myClass04');">4 Lorem ipsum 4</div>
<script>
function changeClass(divTest4, myClass04)
{
document.getElementById(divTest4).className=myClass04;
}
</script>

[Blan]

I haven't seen anything be called to return to 'default class'.
So I guess you should claim them to return back in your each JS script.
Although your thought is correct, try to use array to simplify your scripts.
Maybe it better to find some example on the internet first, then modify it.

[daveVk]

Try something like this, check if the 4 classes myClass01 .. 04 are needed or if the one class say myClass ( the hilighted state ) will suffice. Script to go in head section.

<a href="\" onclick="changeClass('divTest1', 'myClass01');return false;">1 Lorem ipsum 1</a>
<br>
<a href="\" onclick="changeClass('divTest2', 'myClass02');return false;">2 Lorem ipsum 2</a>
<br>
<a href="\" onclick="changeClass('divTest3', 'myClass03');return false;">3 Lorem ipsum 3</a>
<br>
<a href="\" onclick="changeClass('divTest4', 'myClass04');return false;">4 Lorem ipsum 4</a>
</div>

<script>
var lastDiv = null;
var lastClass = null;
function changeClass(divTest, myClass) {
// restore last change
if ( lastDiv !== null ) { lastDiv.className = lastClass; }
// make change and remember details
lastDiv=document.getElementById(divTest);
lastClass=lastDiv.className;
lastDiv.className=myClass;
}
</script>