Обработка нескольких разделов в javascript

Question

В моей программе у меня есть 3 раздела с информацией о классе, «интерес» и «стена». Я хочу, чтобы эти подразделения меняли свой цвет, когда пользователь нажимает на него. Изначально все классы с 3-мя разрядами имеют одинаковый цвет #dcdcdc. Когда пользователь нажимает на 1 из них, я хочу изменить его цвет на #999, но цвет других подразделений должен оставаться #dcdcdc.

Эта часть работает правильно, но когда я нажимаю на 2-ое деление, предыдущий цвет не меняет цвет на #dcdcdc.

Часть JavaScript.

$(document).ready(function(){ 
$('#pro_head > div').click 
(
    function() 
    { 
    $(this).css("background-color", "#999"); 
    $(this).css("font-weight", "bold"); 
    }, 
); 
}); 

HTML часть:

<div pro_head> 
    <div class="information"></div> 
    <div class="interest"></div> 
    <div class="wall"></div> 
</div> 

Answer 1

CSS

.selected { 
    background-color: #999; 
    font-weight : bold; 
} 

JS

$(document).ready(function(){ 
    var divs1 = $('#pro_head1 > div'), /* I'm guessing selectors */ 
     divs2 = $('#pro_head2 > div'), 
     addHandler = function(divs) { 
     divs.on('click', function() { 
      divs.removeClass('selected'); 
      $(this).addClass('selected'); 
     }); 
     }; 

addHandler(divs1); 
addHandler(divs2); 

}) 

Идея заключается в том, чтобы создать специальный класс, который должен быть применен на выбранное деление (и удалены в другом месте). Таким образом, вы можете управлять сложным стилем, не указав все правила CSS в JS, и вы можете лучше определить презентационный уровень из функционального уровня.

Редактировать: обновляется после запроса пользователя в комментарии.

Answer 2

Вы могли бы сделать

$(document).ready(function(){ 
$('#pro_head > div').click 
(
    function() 
    { 
    var divs = $('#pro_head > div'); 
    divs.css("background-color", "#dcdcdc"); 
    divs.css("font-weight", "normal"); 
    $(this).css("background-color", "#999"); 
    $(this).css("font-weight", "bold"); 
    }, 
); 
});