patternjavascriptMinor

Changing a menu tab's color on click

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

clicktabcolormenuchanging

Problem

I've got a tab menu and functions that change the tab's 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.

Solution

I would suggest changing your html and giving all the tags some class like 'tag', then you'll be able to do something like:

B1
B2
B3

    function changeColor(id) {    
        var tabs = document.getElementsByClassName('tab')
        for (var i = 0; i

see fiddle - http://fiddle.jshell.net/vP7ku/

must shorter, Hua?

Code Snippets

<button id="tab1" class="tab" onClick="changeColor(this.id)">B1</button>
<button id="tab2" class="tab" onClick="changeColor(this.id)">B2</button>
<button id="tab3" class="tab" onClick="changeColor(this.id)">B3</button>
<script type="text/javascript">
    function changeColor(id) {    
        var tabs = document.getElementsByClassName('tab')
        for (var i = 0; i < tabs.length; ++i) {
            var item = tabs[i];
            item.style.backgroundColor = (item.id == id) ? "white" : "silver";
        }
    }
</script>

Context

StackExchange Code Review Q#55221, answer score: 3

Revisions (0)

No revisions yet.