javascript - 处理JavaScript中的多个除法

在我的程序中，我有3个部门，分别为“信息”，“兴趣”和“墙”。
我希望这些分区在用户单击时更改其颜色。
最初，所有3个划分类均具有相同的颜色#dcdcdc。
当用户单击其中之一时，我想将其颜色更改为#999，但其他分区的颜色必须保持为#dcdcdc。

这大部分工作正常，但是当我单击第二分区时，前一个不会将其颜色更改回#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>

最佳答案

的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);

})

这个想法是创建一个特殊的类，该类必须应用于选定的部门（并在其他位置删除）。这样，您可以管理复杂的样式而无需在JS中指定所有css规则，并且可以从功能层更好地识别表示层

编辑：在用户请求后在评论中更新。