在Javascript中更改一系列选项卡上的背景色

我正在处理一个应用程序，在前端，我有一些自定义选项卡，当单击其中一个时，我需要这些选项卡。我捕获选项卡上的文本，例如住院患者，捕获值后背景颜色会发生变化

我的目标是一次单击一个选项卡。基本上， 当前单击的选项卡的背景色应更改 以及上一次单击选项卡时捕获的值（选项卡上的文本） 恢复到其原始状态

标记代码

<div class="row">
    <div class="col-11 mx-auto d-flex jbiz-plans">
        <div class="col flex-fill benefit text-center">
        <img src="{{ asset('images/care.png')}}">  <br>
            Inpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Outpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Dental
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Optical
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Maternity
        </div>
    </div>
</div>

---

您可以将JavaScript更改为以下内容。它将类为“benefit”的所有元素设置为其默认背景色和颜色，然后将单击的元素更改为新的背景色和颜色：

$(".benefit").click(function () {
    // reset old values
    $('.benefit').css("color", "");
    $('.benefit').css("background-color", "");
    // update clicked element
    $(this).css("color", "gray");
    $(this).css("background-color", "#d6d2c5");
});

这是否实现了您的期望

---

您可以将JavaScript更改为以下格式。它将类为“benefit”的所有元素设置为其默认背景色和颜色，然后将单击的元素更改为新的背景色和颜色：

$(".benefit").click(function () {
    // reset old values
    $('.benefit').css("color", "");
    $('.benefit').css("background-color", "");
    // update clicked element
    $(this).css("color", "gray");
    $(this).css("background-color", "#d6d2c5");
});

这是否实现了您的期望

---

将所有优点的颜色重置为默认值，然后设置单击元素的值应该可以工作

让bgColor=false；
$（“.benefit”）。单击（函数（）{
$（'.benefit'）.css（“背景色”，”）；
$（'.benefit'）.css（“颜色，”）；
如果（bgColor=！bgColor）{
$（this.css（“背景色”，“ba0c2f”）；
$（this.css（“color”，“#fff”）；
}否则{
$（this.css（“背景色”，“#d6d2c5”）；
$（this.css（“颜色”、“灰色”）；
}
});



住院病人


门诊病人


牙科的


视力的


怀孕
将所有优点的颜色重置为默认值，然后设置单击元素的值应该可以工作


让bgColor=false；
$（“.benefit”）。单击（函数（）{
$（'.benefit'）.css（“背景色”，”）；
$（'.benefit'）.css（“颜色，”）；
如果（bgColor=！bgColor）{
$（this.css（“背景色”，“ba0c2f”）；
$（this.css（“color”，“#fff”）；
}否则{
$（this.css（“背景色”，“#d6d2c5”）；
$（this.css（“颜色”、“灰色”）；
}
});



住院病人


门诊病人


牙科的


视力的


怀孕
能否为上述代码创建一个代码笔或小提琴？将对先前更改的选项卡的引用存储在变量中，以便在单击下一个选项卡时重置该选项卡的颜色…？（在您的示例中，
bgColor
变量是什么，您是否在单击处理程序之外的任何地方更改该变量？）您能否为上述代码创建一个代码笔或小提琴？将对先前更改的选项卡的引用存储在变量中，以便您可以在单击下一个选项卡时重置该选项卡的颜色…？（顺便说一句，在您的示例中，
bgColor
变量是什么，您是否在单击处理程序之外的任何地方更改该变量？）