Suggestions/Help with my Code

[milo3169]

Hello,

I am a beginner to JavaScript and I am in a dilemma on the way I have coded this Function. I’ve been working on creating a tabbed navigation menu using AJAX and CSS Sliding door technique. All of the AJAX coding works and the CSS Sliding door technique works, but what I wanted to do is when and particular tab is selected “Current” the tab color (Background Picture) would change color. The only way that I thought of was to change it using JavaScript. Well, after racking my brain I came up with the solution below. It works the way I want it to, but I’m pretty sure there is a better, more efficient way to write that code (highlighted in red). I know it’s bad to hard code in a function (makerequest()), but for the life of me, I can’t seem to figure on how to do this. Can someone help shed some light on this for me?

Thank You in Advance

JavaScript Code

	var xmlhttp = false;
	
	//Check if we are using IE.
	try {
		//If the Javascript version is greater than 5.
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		//alert ("You are using Microsoft Internet Explorer.");
	} catch (e) {
		//If not, then use the older active x object.
		try {
			//If we are using Internet Explorer.
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			//alert ("You are using Microsoft Internet Explorder");
		} catch (E) {
			//Else we must be using a non-IE browser.
			xmlhttp = false;
		}
	}
	
	//If we are using a non-IE browser, create a javascript instance of the object.
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
		xmlhttp = new XMLHttpRequest();
		//alert ("You are not using Microsoft Internet Explorer");
	}
	
	function makerequest(serverPage, objID, tabID) {
		
		var obj = document.getElementById(objID);
		
		[COLOR=red]if(tabID == 'cs1')
		{
		document.getElementById(tabID).className = 'current';
		document.getElementById("cs2").className = '';
		document.getElementById("cs3").className = '';
		document.getElementById("cs4").className = '';
		}

		if(tabID == 'cs2')
		{
		document.getElementById(tabID).className = 'current';
		document.getElementById("cs1").className = '';
		document.getElementById("cs3").className = '';
		document.getElementById("cs4").className = '';
		}
		if(tabID == 'cs3')
		{
		document.getElementById(tabID).className = 'current';
		document.getElementById("cs1").className = '';
		document.getElementById("cs2").className = '';
		document.getElementById("cs4").className = '';
		}
		if(tabID == 'cs4')
		{
		document.getElementById(tabID).className = 'current';
		document.getElementById("cs1").className = '';
		document.getElementById("cs2").className = '';
		document.getElementById("cs3").className = '';
		}[/color]

			
		xmlhttp.open("GET", serverPage);
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				obj.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);
	}

HTML Code

		<ul>
			<li id="cs1"><a href="home.htm" onclick="makerequest('home.htm','hw','cs1'); return false;">Home</a></li>
			<li id="cs2"><a href="specs.htm" onclick="makerequest('specs.htm','hw','cs2'); return false;">Specifications</a></li>
			<li id="cs3"><a href="warr.htm" onclick="makerequest('warr.htm','hw','cs3'); return false;">Warranties</a></li>
			<li id="cs4"><a href="assc.htm" onclick="makerequest('assc.htm','hw','cs4'); return false;">Accessories</a></li>
		</ul>
	<div id="content">
		<div id="hw"></div>
	</div>

 

[aardvark92]

How about something like this:

for(i=1;i<=4;i++) {
  document.getElementById("cs"+i).className = '';
}
document.getElementById(tabID).className = 'current';

 

[milo3169]

That works A lot better than what I had. I guess I got so narrow minded that I couldn't see it that way. Thanks a lot for pointing that out to me aardvark92.