Javascript 如何将两个函数应用于li

我有三个li和两个函数，通过单击它们中的每一个都会变为白色，但是我想单击三个函数中的一个，另外两个返回到原始颜色

函数白色（elem）{
$（elem.css（'background-color'，'white'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
函数灰度（elem）{
$（elem）.css（'background-color'，'#f2f2'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
$（“#op1”）。单击（函数（evt）{
evt.preventDefault（）；
灰度（evt.target）；
});
$（“#op2”）。单击（函数（evt）{
evt.preventDefault（）；
灰度（evt.target）；
});
$（“#op3”）。单击（函数（evt）{
evt.preventDefault（）；
灰度（evt.target）；
});



一种解决方案是恢复所有调用
whitecolor（）
函数的链接，然后将
graycolor（）
函数仅应用于目标链接


函数白色（elem）
{
$（elem.css（'background-color'，'white'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
函数灰度（elem）
{
$（elem）.css（'background-color'，'#f2f2'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
$（“#op1，#op2，#op3”）。单击（函数（evt）
{
evt.preventDefault（）；
白色（“op1，#op2，#op3”）；
灰度（evt.target）；
});



一种解决方案是恢复所有调用
whitecolor（）
函数的链接，然后将
graycolor（）
函数仅应用于目标链接


函数白色（elem）
{
$（elem.css（'background-color'，'white'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
函数灰度（elem）
{
$（elem）.css（'background-color'，'#f2f2'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
$（“#op1，#op2，#op3”）。单击（函数（evt）
{
evt.preventDefault（）；
白色（“op1，#op2，#op3”）；
灰度（evt.target）；
});



我建议将白色样式应用于所有元素，然后再将灰色样式应用于单击的元素

我更喜欢使用类，但是对于这个例子，我只是使用类型选择器来定位元素，这样我就不需要接触您的标记

我还删除了一些不必要的重复：因为所有三个单击处理程序的主体都是相同的，所以您可以对所有三个元素使用与单击处理程序相同的匿名函数，以逗号分隔


函数白色（elem）{
$（elem.css（'background-color'，'white'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
函数灰度（elem）{
$（elem）.css（'background-color'，'#f2f2'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
$（“#op1，#op2，#op3”）。单击（函数（evt）{
evt.preventDefault（）；
白色（$（'a'））；
灰度（evt.target）；
});



我建议将白色样式应用于所有元素，然后再将灰色样式应用于单击的元素

我更喜欢使用类，但是对于这个例子，我只是使用类型选择器来定位元素，这样我就不需要接触您的标记

我还删除了一些不必要的重复：因为所有三个单击处理程序的主体都是相同的，所以您可以对所有三个元素使用与单击处理程序相同的匿名函数，以逗号分隔


函数白色（elem）{
$（elem.css（'background-color'，'white'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
函数灰度（elem）{
$（elem）.css（'background-color'，'#f2f2'）；
$（elem）.css（'border-top'，'0.1px solid#8c8a8a'）；
$（elem）.css（'border-right'，'0.1px solid#8c8a8a'）；
}
$（“#op1，#op2，#op3”）。单击（函数（evt）{
evt.preventDefault（）；
白色（$（'a'））；
灰度（evt.target）；
});



  
而不是为三个独立的元素重复基本相同的代码，考虑在元素上使用相同的类名，并编写代码以同时对整个组进行作用。
切换类名也比单独修改样式规则简单得多（特别是考虑到您正在接触的一些规则实际上没有改变）


$（'.item'）。单击（函数（）{
$（'.item'）.removeClass（'gray'）//将所有元素重置为白色
$（this）.addClass（'gray'）//将单击的元素设置为灰色
});
/*在此处设置默认背景色，这样就不需要切换两个类。
也在这里设置边界，因为它们根本不会改变*/
.项目{
背景色：#FFF；
边框顶部：1px实心#8C8A8A；
右边框：1px实心#8C8A8A；
}
/*赋予灰色规则更多的特殊性，这样它将覆盖默认值*/
.项目.灰色{
背景色：#F2F2；
}





 
而不是为三个独立的元素重复基本相同的代码，考虑在元素上使用相同的类名，并编写代码以同时对整个组进行作用。
切换类名也比单独修改样式规则简单得多（特别是考虑到您正在接触的一些规则实际上没有改变）

$（'.item'）。单击（函数（）{
$（'.item'）.removeClass（'gray'）//将所有元素重置为白色
$（this）.addClass（'gray'）//将单击的元素设置为灰色
});
/*集