jQuery - 加載時添加按鈕樣式，並在單擊其他人時刪除樣式。

Question

我希望在加載頁面時將樣式屬性添加到某個按鈕菜單，並刪除該樣式並添加到單擊的按鈕中。

$(document).ready(function() { 
    loadJC(); 
}); 

function loadJC() { 
    $('#jcMenu').attr('style', 'background-color:#29ABE2;'); 
} 

$('.menu').click(function() { 
    if ($(this) !== $('#jcMenu')) { 
     $(this).attr('style', 'background-color:#29ABE2;'); 
     $('#jcMenu').removeAttr().end(); 
    } 
}); 

這是我fiddle，我不知道 如果我在底部的功能邏輯是適當使用jQuery語法。

Answer 1

哦好吧，我明白你在做什麼。我的建議是以下幾點：

• 創建一個active類
• 添加active類按鈕，在HTML
• 上點擊，從兄弟姐妹刪除類。

也許是這樣的：

HTML：

<div class="row"> 
    <button id="dateMenu" class="span2 btn menu">Date</button> 
    <button id="jcMenu" class="active span3 btn menu">Job Category</button> 
    <button id="jpMenu" class="span2 btn menu">Job Priority</button> 
    <button id="wsMenu" class="span3 btn menu">Workflow Status</button> 
    <button class="span1 btn custom"> <i class="icon-arrow-left"></i></button> 
    <button id="refresh" class="span1 btn custom"> <i class="icon-refresh"></i></button> 
</div> 

CSS：

.btn { 
    color:white; 
    background:none; 
    background-color:#B3B3B3; 
    border-radius:0; 
    text-shadow:none; 
} 
.btn:hover { 
    background-color:#29ABE2; 
    color:white; 
} 
.custom { 
    background:none; 
} 
.active{ 
    background-color:#29ABE2; 
} 

JAVASCRIPT：

$(document).ready(function() { 
    $('.menu').click(function() { 
     if (!$(this).hasClass('active')) { 
      $(this).addClass('active') 
        .siblings('.menu') 
        .removeClass('active'); 
     } 
    }); 
}); 

DEMO： http://jsfiddle.net/dirtyd77/4CN7p/4/

Answer 2

$(document).ready(function() { 
    // load this background when dom loads 
    $('#jcMenu').css('background-color', '#29ABE2'); 

    // when user click change the style. 
    $('.menu').click(function(){ 
     // reset all menus to grey 
     $('.menu').css('background-color', '#B3B3B3'); 
     // only this one that i clicked use blue background 
     $(this).css('background-color', '#29ABE2'); 
    }) 

});