javascript - HTML/CSS/JS 想给一组对象上色然后重新给其中一个上色？

Question

基本上我有 6 个标签作为按钮。单击它们时，它们会从白色变为蓝色。当您点击另一个标签时，之前的蓝色标签再次变为白色，而当前点击的标签变为蓝色。

目前下面的代码将它们全部设置为白色，但似乎没有将新单击的标签着色为蓝色。但是，如果我注释掉该行:

document.getElementsByTagName('label').style.backgroundColor = '#fff';

然后每个点击的标签变成蓝色，但当我点击一个新标签时它仍然是蓝色的。所以我需要知道的是如何将标签类背景设置为白色，然后将最近单击的标签的背景变为蓝色。

结果应该是每次只有最近点击的标签背景应该是蓝色的，其他的是白色的。

提前致谢

<script = "text\javascript">
        function toggle(label) {
            document.getElementById('one').style.display = 'block';
            document.getElementsByTagName('label').style.backgroundColor = '#fff';
            document.getElementById(label).style.color = 'rgb(54, 95, 145)';
            document.getElementById(label).style.backgroundColor = 'rgb(193,203,225)';
        }

    </script>

    <label id='Label6' class='button' onmousedown = 'toggle("Label6")'>Personal Details</label>
    <label id='Label1' class='button' onmousedown = 'toggle("Label1")'>Education</label>
    <label id='Label2' class='button' onmousedown = 'toggle("Label2")'>Achievements</label>
    <label id='Label3' class='button' onmousedown = 'toggle("Label3")'>Work Experience  </label>
    <label id='Label5' class='button' onmousedown = 'toggle("Label5")'>IT Skills</label>
    <label id='Label4' class='button' onmousedown = 'toggle("Label4")'>Languages</label>

Answer 1

您突出显示的行不正确。这个电话:

document.getElementsByTagName('label');

返回一个元素数组，该数组没有属性style。您需要遍历结果:

var els = document.getElementsByTagName('label');
for (var i=0; i<els.length; i++) {
    els[i].style.backgroundColor = '#fff';
}

或者，使用 jQuery正如 Mahesh 建议的那样。