Sometimes there is a need to change the “class” of an object to apply a different style to it. For example you have 4 css buttons, then you want one to be “Active”, maybe highlighted different from the rest. And when you click another button, the “Active” button becomes “Inactive” and a new button becomes “Active”.
I will show you how to access it using javascript.
CSS
First you need to define your styles, “.active” and “.inactive”
.active {
background-color:#FF0000; (meaning red)
}
.inactive {
background-color:#FFFFFF; (meaning white, all buttons should start with white)
}
JAVASCRIPT
There are two options to change a class for a certain document element
#1 setAttribute(“class”, “active”);
#2 className = ‘active’;
Button = a variable passed when we click a button. For example if we click the 2nd button it passes “Button02″ as the value.
You can do this by onClick = “changeToActive(‘Button02′)”
Then in your javascript function will say
function changeToActive(x) {
document.getElementById(x).setAttribute(“class”, “active”);
}
or
function changeToActive(x) {
document.getElementById(x).setAttribute(“class”, “active”);
}
That’s it!
Remember that you need to set all buttons “Inactive” first so that they are all white. Then you choose which one to set as “Active”
I hope this works for you! Write me a comment or email me if you need help
