Question

我有两个关于此选项的标签。我已经为这两个标签创建了鼠标悬停和鼠标移动。当您突出显示其中一个时，它们共享背景颜色。

但是，现在我正在创建一个点击功能。当您单击其中一个选项卡时，我希望它能够保持该背景颜色，即使用户第二次突出显示，此次也不会改变颜色。我想要这样做的原因是显示哪个标签处于活动状态，因为每个标签都有自己的单独内容，这些内容将在相同的div中单击。

HTML code：

<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的：

$(document).ready(function() {

  $(".optiontabs").mouseover(function() {
    $(this).css("background-color", "#3e597c");

  });

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

  });

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

});

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

提前感谢您的帮助！

Answer 1

单击一次元素后，必须取消绑定鼠标悬停和鼠标移动。您可以使用$('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");
    });

});

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

1 个答案: