處理在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); 

}) 

的想法是創建一個對選擇的劃分要應用的特殊類（並在別處刪除）。通過這種方式，你可以管理複雜的風格，而無需指定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"); 
    }, 
); 
});