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

样本： 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');
    })

});

jQuery - 加载时添加按钮样式，单击其他样式时删除样式。

2 个答案: