javascript - 检查是否有类并且不出现代码//防止删除类

Question

我有类似标签 View 的东西。当我在选项卡之间切换时，一切正常。

当在链接上单击两次时(再次在 .active 上单击)，选项卡的主要内容将获得隐藏类并被“消除”。

如何检查或绑定(bind)此行为，以便单击事件标记时它不会再次更改并且内容仍然会出现？

我尝试过使用 .hasClass() 和 if {} 像 if(!$(".tabTrigger li").hasClass("active )) {} 但这不起作用，我认为这是因为它正在检查它在一般情况下是否具有该类。

$(".tabTrigger li").click(function() {
  var clickClass = $(this).attr("class");
  var selector = clickClass.replace("trigger ", "");
  $(".tabTrigger .trigger.active").removeClass("active");
  $(this).addClass("active");
  $(".tabArea").addClass("hidden");
  $("#" + selector).removeClass("hidden");
});

.trigger.active {
  font-weight: bold;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

.hidden {
  display: none;
}

li:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <nav class="tabTrigger">
    <ul>
      <li class="trigger First active">First</li>
      <li class="trigger Second">Second</li>
    </ul>
  </nav>
  <section class="tabContent">
    <section class="tabArea" id="First">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
    </section>
    <section class="tabArea hidden" id="Second">
      <p>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt.</p>
    </section>
  </section>
</section>

Answer 1

有很多方法可以做到这一点，但只需在 click 事件 中添加 if(!$(this).hasClass("active")){} 检查即可将为您工作。

这是运行代码片段:

$(".tabTrigger li").click(function() {
  if (!$(this).hasClass("active")) {
    var clickClass = $(this).attr("class");
    var selector = clickClass.replace("trigger ", "");
    $(".tabTrigger .trigger.active").removeClass("active");
    $(this).addClass("active");
    $(".tabArea").addClass("hidden");
    $("#" + selector).removeClass("hidden");
  }
});

.trigger.active {
  font-weight: bold;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

.hidden {
  display: none;
}

li:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <nav class="tabTrigger">
    <ul>
      <li class="trigger First active">First</li>
      <li class="trigger Second">Second</li>
    </ul>
  </nav>
  <section class="tabContent">
    <section class="tabArea" id="First">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
    </section>
    <section class="tabArea hidden" id="Second">
      <p>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt.</p>
    </section>
  </section>
</section>