jquery - 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();
    }
});

这是我的小提琴，我不确定底部函数中的逻辑是否适合 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');
        }
    });
});

演示：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');
    })

});