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 , как предлагает Махеш.

Answer 2

Jquery действительно сияет здесь.Я настоятельно рекомендую использовать его

Вы можете сделать что-то вроде

$("label").onclick(function() {
    $("label[id=^label]").css('backgroundcolor', 'white');
    $(this).css('backgroundcolor', 'blue');
});

PS: я не проверял код