Javascript onclick 菜单改变背景颜色

Question

我有这样的菜单：

我的代码更改选定的菜单按钮如下：

$('#bluebutton').click(function () {
    $('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange');
    $('#bluebutton').addClass('selectedblue');
});

$('#redbutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedpurple selectedgreen selectedorange');
    $('#redbutton').addClass('selectedred');
});

$('#purplebutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedgreen selectedorange');
    $('#purplebutton').addClass('selectedpurple');
});

$('#greenbutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedorange');
    $('#greenbutton').addClass('selectedgreen');
});

$('#orangebutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedgreen ');
    $('#orangebutton').addClass('selectedorange');
});

当然这是糟糕的代码，因为它可以写得更短。我应该只使用数字来解决这个问题以便我可以做一些 foreach，还是有更好的方法来做到这一点？

Answer 1

在这种特殊情况下，似乎没有充分的理由添加和删除 classes。只需更改背景颜色，而不是添加和删除 class 即可。

$(this).css("background-color", "red");

Answer 2

这可以通过使用 [id*="button"] 在所有按钮上添加通用点击事件来压缩。然后从嵌套的锚点中抓取相关颜色。

$('[id*="button"]').click(function(){
    $('.testul li').removeClass();
    $(this).addClass('selected'+$('a',this).attr('class'));
});

或

$('li').click.../*this would be the same as above*/

fiddle

Answer 3

您可以将代码减少到只有 1 次点击绑定。单击某个元素时，将删除所有 li 中的 class，然后在当前单击的 li 上添加选定的 class。

$(".testul > li").click(function(){
$('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange selectedblue');
    var color = $(this).attr("id").replace("button","");
    $('#'+color+'button').addClass('selected'+color);

});

这是更新后的 fiddle - https://jsfiddle.net/23r4q610/2/

Answer 4

我会避免将颜色名称硬编码到 HTML ID 中。而是使用 CSS class 名称，如 "selected" 并在 CSS 中描述它应该是什么样子。示例：

<li id="home-button" class="color-button"><a href="#">Home</a>

CSS:

#home-button.selected,
#home-button:hover {
    background: -webkit-linear-gradient(#78b1ff, #4881dc);
}

JS:

$('.color-button').click(function () {
    $(this).toggleClass("selected").siblings(".color-button").removeClass("selected");
}

通过这种方式，颜色信息（表示）与语义信息（如 "home"）分离，JS 代码大大缩短。

注意：这只是一个建议，我没有测试过，但应该给你一个很好的起点。

Javascript onclick 菜单改变背景颜色

Javascript onclick menu change background colors

javascript

css

jquery

menu