Javascript 更改背景颜色和活动div颜色

我正在构建一个导航，我想添加一些功能

单击一个div，导航背景颜色会淡出，然后活动按钮会淡出颜色，但当我单击另一个菜单按钮时，上一个按钮的颜色实际上就在那里。。。我希望只有acutally按钮会从导航中淡出颜色和背景，而上一个按钮会删除颜色

$('.re').click(function() {
    $('.re').removeClass('active');
    $(this).addClass('active');
});

$("#home0").click(function() {
    $("#navigation").stop().animate({"backgroundColor":"grey"}, 800);
    $(".active").stop().animate({"backgroundColor":"green"}, 800);

});

$("#home1").click(function() {
    $("#navigation").stop().animate({"backgroundColor":"black"}, 800);
    $(".active").stop().animate({"backgroundColor":"green"}, 800);
});

$("#home2").click(function() {
    $("#navigation").stop().animate({"backgroundColor":"grey"}, 800);
    $(".active").stop().animate({"backgroundColor":"green"}, 800);
});

这是我的代码，但不起作用：/

---

编辑：这是我的提琴：

因为您要用javascript而不是CSS更改颜色，所以您需要将样式属性与活动类一起删除

演示

但是你真的应该用CSS和转换来处理这个问题。。请参见

我建议使用来设置CSS更改的动画。下面是一个例子：

HTML: 这里，我将所需的导航背景颜色存储为自定义数据属性data navbg：

<div id="navigation">
    <div class="box" data-navbg="gray"></div>
    <div class="box" data-navbg="black"></div>
    <div class="box" data-navbg="gray"></div>
    <div class="box" data-navbg="black"></div>
    <div class="box" data-navbg="gray"></div>
</div>

CSS: 这里，第一个定义将CSS转换应用于导航和方框：

#navigation, .box {
    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}

#navigation {
    background-color: black;
    height:60px;
    width: 600px;
    margin: 0 auto;
}

.box {
    width: 60px;
    height: 60px;
    float: left;
    background-color: #787878;
    margin-right: 5px;
    cursor: pointer;
}
.box.active {
    background-color: green;
}

---

你能做一个JSFIDLE吗？请在这里发布的代码中包含相关的HTML标记或创建一个，你的目标是一个id home0而不是一个class.home0。参考你的提琴。请点击多个div，你会看到上一个div的颜色仍然存在，但只有实际点击的div必须是绿色的…耶！真不错！非常感谢你+1用于直接应用于OP现有代码的解决方案和引用替代方法。哇！非常感谢您的工作和解释！你疯了！非常感谢你！如果可以的话，也许你也可以帮我。几个星期内似乎没有人能帮我。

$('.box').click(function () {
    var navbg = $(this).data('navbg');
    $('.box').removeClass('active');
    $(this).addClass('active');
    $('div#navigation').css('backgroundColor', navbg);
});

#navigation, .box {
    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}

#navigation {
    background-color: black;
    height:60px;
    width: 600px;
    margin: 0 auto;
}

.box {
    width: 60px;
    height: 60px;
    float: left;
    background-color: #787878;
    margin-right: 5px;
    cursor: pointer;
}
.box.active {
    background-color: green;
}