删除具有指定名称

Question

我使用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会添加到每个标签中

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

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

但是现在当前单击的选项卡上没有设置活动类。怎么解决这个问题？

Answer 1

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

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

Answer 2

您的日志中必定存在错误，

  

removeClass未定义。

您错过了使用哪个elements删除active课程。

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

<script type="text/javascript">

$(function() {

  const clickables = $(".clickable");

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

});
</script>

Answer 3

尝试指定要删除类

的元素

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

Answer 4

你需要有一个jQuery选择器来让removeClass实际做点什么。所以你可以这样做：

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

哪个会使所有当前＆＃34;活跃＆＃34;元素并删除active类。