删除所有具有指定名称的类答案

【问题标题】：Remove all classes with specified name删除所有具有指定名称的类
【发布时间】：2018-03-20 08:45:33
【问题描述】：

我将Bootstrap Tab 脚本用作：

<div class="container">
    <ul class="nav nav-tabs">
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/calculaties.php?id='.$row['id'].'">Calculaties</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/offertes.php?id='.$row['id'].'">Offertes / bevestigingen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/bestellingen.php?id='.$row['id'].'">Bestellingen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/vrachtbrieven.php?id='.$row['id'].'">Vrachtbrieven</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/facturen.php?id='.$row['id'].'">Facturen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/producten.php?id='.$row['id'].'">Producten</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/certificaten.php?id='.$row['id'].'">Certificaten</a></li>
    </ul>
</div>

要得到这个结果：

要将选项卡设置为活动状态，我正在使用此 JS 脚本：

<script type="text/javascript">
// Change class on click
$(function() {
  $(".clickable").click(function() {
    $(this).addClass("active");
  });
});</script>

当然，当单击所有选项卡时，类 active 添加到每个选项卡导致

为了防止这种情况，我在我的 JS 脚本中添加了 removeClass('active')：

<script type="text/javascript">
// Change class on click
$(function() {
  $(".clickable").click(function() {
    removeClass('active')
    $(this).addClass("active");
  });
});</script>

但是现在当前单击的选项卡上没有设置活动类。如何解决？

【问题讨论】：

我很惊讶您的控制台中没有出现关于 removeClass() 方法调用的错误。如果您在使用他们的一种方法时遇到问题，请首先 RTFM jQuery Documentation，例如 jQuery removeClass

标签： javascript jquery twitter-bootstrap

【解决方案1】：

你想从所有拥有它的元素中删除活动类，所以你需要先选择那些元素，你可以这样做：

 $(".clickable").click(function() {
    $('.clickable').removeClass('active')
    $(this).addClass("active");
  });

【讨论】：

【解决方案2】：

尝试指定要移除的元素类

$(".clickable").removeClass('active');

【讨论】：

【解决方案3】：

您的日志中一定有错误，

removeClass 未定义。

您错过了要删除active 类的elements。

获取clickable 元素并从中删除active。因为使用$(".clickable")有一个重复，它遍历了DOM两次，所以可以将其存储在一个变量中。

<script type="text/javascript">

$(function() {

  const clickables = $(".clickable");

  clickables.click(function() {
    clickables.removeClass('active');
    $(this).addClass("active");
  });

});
</script>

【讨论】：

如果新元素获得clickable 属性怎么办？你不应该在这里“缓存”clickables。
在这种情况下它们被定义

【解决方案4】：

您需要有一个 jQuery 选择器才能使 removeClass 实际执行某些操作。所以你可以这样做：

$(function() {
  $(".clickable").click(function() {
    $('.active').removeClass('active')
    $(this).addClass("active");
  });
});

这将获取所有当前“活动”元素并删除 active 类。

【讨论】：

现在，如果 .active 在页面的其他地方使用会怎样？您只想从 .clickable 元素中删除该类。
@Cerbrus 好评论，我只想从 .clickable 元素的类中删除它
@Muiter：那样的话，大吉的回答似乎更合适。