Javascript 第一个网站，需要某些点击功能的帮助

我在这个选项上有两个标签。我已经为这两个选项卡创建了mouseover和mouseleave。高亮显示其中一个时，它们共享背景色

但是，现在我正在创建一个单击函数。当您单击其中一个选项卡时，我希望它保持背景色，即使用户第二次高亮显示，这次也不会更改颜色。我想这样做的原因是显示哪个选项卡是活动的，因为每个选项卡都有自己的单独内容，这些内容将在同一个div中单击

HTML代码：

<div class="meal-details">
  <h4>Lobster & Summer Vegetables with Spicy Herbed Butter</h4>
  <h5 class="optiontabs meal-description">DESCRIPTION</h5>
  <h5 class="optiontabs nutrition-description">NUTRITIONAL INFO</h5>
  <div class="nutrition-breakdown">
    <p>This is the nutrition info bro</p>
  </div>
  <div class="meal-breakdown">
    <p>The meal breakdown and descrition.</p>
  </div>
</div>

我的问题是，为了实现我上面提到的目标，最好的方法是什么。我已经要求Jquery更改活动选项卡的背景颜色，但它没有这样做。我做错了什么

---

提前谢谢你的帮助

单击某个元素一次后，必须解除鼠标悬停和鼠标删除的绑定。您可以使用

$（'element'）.off（'event'）

语法执行此操作。请查看以下代码：

$(document).ready(function() {

    var countClick = 0;

    if(countClick==0) {
        $(".optiontabs").mouseover(function() {
        $(this).css("background-color", "#3e597c");
      });

      $(".optiontabs").mouseleave(function() {
        $(this).css("background-color", "#141C25");
      });
    }

    $(".nutrition-description").click(function() {
        $(".optiontabs").off("mouseleave");
        $(".optiontabs").off("mouseover");
        countClick++;
        $(this).css("background-color", "#3e597c");
        $(this).nextAll(".nutrition-breakdown").css("display", "initial");
        $(this).nextAll(".meal-breakdown").css("display", "none");
    });

});

---

单击元素一次后，必须解除鼠标悬停和鼠标悬停的绑定。您可以使用

$（'element'）.off（'event'）

语法执行此操作。请查看以下代码：

$(document).ready(function() {

    var countClick = 0;

    if(countClick==0) {
        $(".optiontabs").mouseover(function() {
        $(this).css("background-color", "#3e597c");
      });

      $(".optiontabs").mouseleave(function() {
        $(this).css("background-color", "#141C25");
      });
    }

    $(".nutrition-description").click(function() {
        $(".optiontabs").off("mouseleave");
        $(".optiontabs").off("mouseover");
        countClick++;
        $(this).css("background-color", "#3e597c");
        $(this).nextAll(".nutrition-breakdown").css("display", "initial");
        $(this).nextAll(".meal-breakdown").css("display", "none");
    });

});