Question

在我的课程中，我有3个部门，分别是“信息”，“兴趣”和“墙”。我希望这些分区在用户点击它时改变它们的颜色。最初，所有3个分类都具有相同的颜色#dcdcdc。当用户点击其中一个时，我想将其颜色更改为#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);

})

我们的想法是创建一个必须应用于所选部门的特殊类（并在其他地方删除）。通过这种方式，您可以在不指定JS中的所有css规则的情况下管理复杂样式，并且可以更好地从功能层中识别表示层

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

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");
  },
 );
});

在javascript中处理多个部门

2 个答案: