Thread: Change styles onclick

Okay, I need some help here. I need to change the css style from "off" to "on" when clicked. I also need to change all other styles to "off" if they are currently "on" (only 1 will be on at a time).

Here is my div layout:

Code:

	<div class="nav-buttons">
	  <ul>
	    <li class="first"><a href="#" class="nav-product-details-on"></a></li>
	    <li><a href="#" class="nav-guides-literature-off"></a></li>
	    <li><a href="#" class="nav-markets-off"></a></li>
	    <li><a href="#" class="nav-photo-gallery-off"></a></li>
	  </ul>
	</div>

It doesn't matter what the classes are called, they just need to be uniquely identified because of different widths. Basically, I am adding a "-on" and "-off" to the end of each class name to identify that it is active or not. Only one of the elements can be "on" at a time.

Also, here is some JavaScript that I tried to implement with no luck:

Code:

// -- Hide All Div Layers --
function hideDivsHome() {
	var divs = document.getElementsByTagName('a');
	for (var i=0; i < divs.length; i++) {
		var myCell = "nav-" + divs[i].class;

		if (document.getElementById) {
			divs[i].style.display = "none";
			var oCell = document.getElementById("nav-" + divs[i].class);
			if (oCell)
				oCell.className = "homeNavNonActive";
		}
		else if (document.all) {
			document.all[divs[i]].style.display = "none";
			var oCell = document.all("nav-" + divs[i].id);
			if (oCell)
				oCell.className = "homeNavNonActive";
		}
		else if (document.layers) {
			document.layers[divs[i]].display = "none";
			var oCell = document.layers("nav-" + divs[i].class);
			if (oCell)
				oCell.className = "homeNavNonActive";
		}
	}
}




// ***** SHOW SELECTED DIV LAYER *****
function showDivHome(whichLayer) {
	var myCell = whichLayer + "_cell";

	if (document.getElementById) {
		// this is the way the standards work
		document.getElementById(whichLayer).style.display = "block";
		document.getElementById(myCell).className = "homeNavActive";
	}
	else if (document.all) {
		// this is the way old msie versions work
		document.all[whichlayer].style.display = "block";
		document.all[myCell].className = "homeNavActive";
	}
	else if (document.layers) {
		// this is the way nn4 works
		document.layers[whichLayer].display = "block";
		document.layers[myCell].className = "homeNavActive";
	}
}

How are you calling the JS functions?

Can you plug everything in a sample HTML page for testing?

I was calling the JS functions using onClick in the <a> tag.

I have the page online, it is located here:

FI-11 Electric Fan Page

By the way, the JS functions you see were a modification to the functions located on our home page:

http://www.emp-corp.com/

After I click a few links, I notice that a couple JavaScript errors occur:

Line: 97
Char: 1
Error: Object Expected
Code: 0

and...

Line: 98
Char: 1
Error: Object Expected
Code: 0

It only happens when I click Markets, Product Details and PhotoGallery. If you can figure out why there is an object expected it might help.

The JavaScript I am using really does not pertain to this issue. It was for a previous application. It was more of an example of what I was using prior to this design.

Perhaps you can use the example here to do this: How to dynamically change an Elements Style by it's Class Attribute

Okay, so I have come up with a solution to my problem. Here is the JavaScript that I came up with:

Code:

// -- Product Tab Hide/Show --
function changeClass(currClass) {
	var obj = document.getElementById('product-nav-buttons').getElementsByTagName('a');

	for (var x=0; x < obj.length; x++) {
		if (obj[x].className.search(/-on/) > -1) {
			obj[x].className = obj[x].className.replace(/-on/, "-off");
		} else if (obj[x].className == currClass) {
			obj[x].className = obj[x].className.replace(/-off/, "-on");
		}
	}
}

// -- Hide Product Divs --
function hideDivs() {
	var divs = document.getElementById('content-wrapper').getElementsByTagName('div');

	for (var i=0; i < divs.length; i++) {
		if (divs[i].id.search(/nav-/) > -1) {
			if (document.getElementById) {
				divs[i].style.display = "none";
			}
			else if (document.all) {
				document.all[divs[i]].style.display = "none";
			}
			else if (document.layers) {
				document.layers[divs[i]].display = "none";
			}
		}
	}
}

// -- Show Product Div --
function showDiv(whichLayer) {
	if (document.getElementById) {
		// this is the way the standards work
		document.getElementById(whichLayer).style.display = "block";
	}
	else if (document.all) {
		// this is the way old msie versions work
		document.all[whichlayer].style.display = "block";
	}
	else if (document.layers) {
		// this is the way nn4 works
		document.layers[whichLayer].display = "block";
	}
}

The reason it is so custom is because I needed to have specific images that were stored in a class be turned "on" and "off". The way I designated this was with CSS classes:

Code:

#product-nav-buttons {
	margin: 0;
	padding: 0;
	height: 56px;
	background: transparent url('/site-layout/gfx/products/bg-product-information.gif') repeat 0 0;
}
#product-nav-buttons ul {
	margin: 0;
	margin-left: 10px;
	padding: 0;
}
#product-nav-buttons ul li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}
#product-nav-buttons ul li a {
	margin: 0;
	margin-right: 5px;
	padding: 0;
	height: 47px;
	display: block;
	float: left;
}
#product-nav-buttons ul li a.nav-product-details-on {width: 106px; background: transparent url('/site-layout/gfx/products/btn-product-details-on.gif') repeat 0 0;}
#product-nav-buttons ul li a.nav-product-details-off {width: 106px; background: transparent url('/site-layout/gfx/products/btn-product-details-off.gif') repeat 0 0;}
#product-nav-buttons ul li a.nav-markets-on {width: 73px; background: transparent url('/site-layout/gfx/products/btn-markets-on.gif') repeat 0 0;}
#product-nav-buttons ul li a.nav-markets-off {width: 73px; background: transparent url('/site-layout/gfx/products/btn-markets-off.gif') repeat 0 0;}
#product-nav-buttons ul li a.nav-photo-gallery-on {width: 97px; background: transparent url('/site-layout/gfx/products/btn-photo-gallery-on.gif') repeat 0 0;}
#product-nav-buttons ul li a.nav-photo-gallery-off {width: 97px; background: transparent url('/site-layout/gfx/products/btn-photo-gallery-off.gif') repeat 0 0;}
#product-nav-buttons ul li a.nav-guides-literature-on {width: 125px; background: transparent url('/site-layout/gfx/products/btn-guides-literature-on.gif') repeat 0 0;}
#product-nav-buttons ul li a.nav-guides-literature-off {width: 125px; background: transparent url('/site-layout/gfx/products/btn-guides-literature-off.gif') repeat 0 0;}

Finally, the HTML code utilizing these to create the look:

Code:

<div id="product-nav-buttons">
  <ul>
    <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-product-details'); return false;" class="nav-product-details-on"></a></li>
    <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-markets'); return false;" class="nav-markets-off"></a></li>
    <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-guides-literature'); return false;" class="nav-guides-literature-off"></a></li>
    <li><a href="#" onClick="changeClass(this.className); hideDivs(); showDiv('nav-photo-gallery'); return false;" class="nav-photo-gallery-off"></a></li>
  </ul>
</div>