GetElementById - Changing multiple IDs for CSS

[TeviH]

I have a funny issue I was hoping someone can help me with. The code below is not very elegant, but I don't understand why it's not working. Let me explain:

I have a tabbed system with 3 tabs. Clicking one tab will had the content of the other two tabs and show the current tab. Furthermore, clicking a tab will cause the styles to change to an "on" state, and cause whichever other tab is currently selected to revert to an off state.

It works -- mostly. The issue is when I attempt to make the other two tabs revert to their off state. Since only one tab can possibly be in the on state at once, as soon as the JS encounters a statement (don't know the proper lingo) that does not exist, it doesn't change any of the tabs.

For example, in the first block of code, would show the first tab's content and turn the first tab to an "on" state. Clearly, though, the other two tabs won't be in an on state - only one of them. And my way of declaring both of them as "off" seems to be throwing this code out of whack.

What's the best way to code this?

	function mySaved(){
	document.getElementById("mysaved").style.display = "block";
	document.getElementById("myagent").style.display = "none";
	document.getElementById("myinfo").style.display = "none";
	document.getElementById("one").id = "oneOn";
	document.getElementById("twoOn").id = "two";
	document.getElementById("threeOn").id = "three";
	}
	
	function myAgent(){
	document.getElementById("mysaved").style.display = "none";
	document.getElementById("myagent").style.display = "block";
	document.getElementById("myinfo").style.display = "none";
	document.getElementById("two").id = "twoOn";
	document.getElementById("oneOn").id = "one";
	document.getElementById("threeOn").id = "three";
	}
	
	function myInfo(){
	document.getElementById("mysaved").style.display = "none";
	document.getElementById("myagent").style.display = "none";
	document.getElementById("myinfo").style.display = "block";
	document.getElementById("three").id = "threeOn";
	document.getElementById("oneOn").id = "one";
	document.getElementById("twoOn").id = "two";
	}

 

[Joe]

It's easier if you do the following:

function tab (divid, content) {
   getElementById(+divid+).innerHTML=content
}

That should work fine. If it doesn't, drop me a PM

Joe

 

[mountlaurel]

hello i just read your post.. did you ever tried jquery? i notice that your scripts is very large.. use jquery and you can do this for just a few lines.

http://jquery.com