I've got a tab menu and functions that change the tabs color on click, giving the clicked tab a different color from the others. The thing is, when I click one, I give it another background-color
easily but I'm also setting all the other tabs background-color
.
In my largest menu there are 6 tabs:
document.getElementById('tab1').onclick = changeColor1;
document.getElementById('tab2').onclick = changeColor2;
document.getElementById('tab3').onclick = changeColor3;
document.getElementById('tab4').onclick = changeColor4;
document.getElementById('tab5').onclick = changeColor5;
document.getElementById('tab6').onclick = changeColor6;
function changeColor1() {
document.getElementById('tab1').style.backgroundColor = "white";
document.getElementById('tab2').style.backgroundColor = "silver";
document.getElementById('tab3').style.backgroundColor = "silver";
document.getElementById('tab4').style.backgroundColor = "silver";
document.getElementById('tab5').style.backgroundColor = "silver";
document.getElementById('tab6').style.backgroundColor = "silver";
return false;
}
function changeColor2() {
document.getElementById('tab1').style.backgroundColor = "silver";
document.getElementById('tab2').style.backgroundColor = "white";
document.getElementById('tab3').style.backgroundColor = "silver";
document.getElementById('tab4').style.backgroundColor = "silver";
document.getElementById('tab5').style.backgroundColor = "silver";
document.getElementById('tab6').style.backgroundColor = "silver";
return false;
}
...
...
... and it goes on for the 6 tabs. I'm sure this can be reduced, I just don't know how.