Javascript 如果元素包含特定属性，则在div上添加/删除类

我有一个像这样的潜水舱：

<div class="navigation fixed-top">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>

输出如下所示：

class=“navigation navigation fixed top fixed bottom fixed top”

---

似乎只是添加了这些类。

通过与多个类一起使用，您可以轻松切换导航类：

$(".navigation").toggleClass("fixed-bottom fixed-top");

假设div只有其中一个类，这段代码将删除它并添加另一个类。再次运行它将恢复原始状态，依此类推。

如何

var isActive = $('a[href="#home"]').hasClass('active');
$(".navigation")
  .toggleClass("navigation-fixed-bottom", isActive)
  .toggleClass("navigation-fixed-top", !isActive);

---

我在JSBin中为您解决了一些问题：

---

要在两个类之间切换，可以使用

$。toggle（'class1 class2'）

，如@Jon所述。

.not（）

返回jQuery对象。使用

.is（“.active”）===false

我刚刚尝试过，但是添加这个类似乎没有做任何其他事情。我已经编辑了我的问题，请看一看……更确切地说，输出是这样的

导航固定顶部固定底部

，它应该是这样的

导航固定底部

。@Alecs:好吧，你到底在使用哪些类？你在问题中写了

fixed top

，你的意思是

navigation fixed top

？对不起，我已经更改了标记，默认情况下我有fixed top，我想在该href有活动类且不必将其切换回fixed top时将其更改为fixed bottom。我忘了提到，在我的页面中，当活动类切换时，不涉及刷新。只是尝试了一下，它在

固定顶部

之后添加了

固定底部

，输出如下所示编辑了我的答案<代码>导航、

固定底部

和

导航固定底部

是不同的、完全不相关的类。如果这是您想要的，您不能部分切换它们。现在我得到了

getSyntaxError:意外标记。

Oops，有一个额外的分号。现在部分工作，当

a[href=“#home”]

有一个活动类时，它切换固定底部，但当该类不再活动时，它不会切换回固定顶部。我忘了提到这是在同一个页面上发生的，当活动类发生变化时，页面没有刷新这似乎很好，但我不需要

单击

功能，我只需要添加

固定底部

类，前提是

一个

元素具有该特定属性且处于活动状态，如果不这样做，则相反

var isActive = $('a[href="#home"]').hasClass('active');
$(".navigation")
  .toggleClass("navigation-fixed-bottom", isActive)
  .toggleClass("navigation-fixed-top", !isActive);

$(function(){
  if($('a[href="#home"]').is('.active')) {
    $(".navigation").toggleClass("fixed-bottom fixed-top"); 
  }

  console.log($(".navigation").attr('class'))
});