Question

我有一个这样的div：

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

当我点击About时，它会自动添加class="active"。例如，当href="#home" d包含class="active"时，我想将<div class="navigation navigation-fixed-top">更改为<div class="navigation navigation-fixed-bottom">。

我正在尝试这个：

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

输出看起来像这样：class="navigation navigation-fixed-top fixed-bottom fixed-top" 似乎只是添加了这些类。

Answer 1

您可以使用多个类toggleClass轻松切换导航类：

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

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

Answer 2

怎么样？

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

Answer 3

我在JSBin中修复了一些东西：

http://jsbin.com/hawugefi/2/edit

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

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

要在两个班级之间切换，您可以使用$.toggle('class1 class2')，如@Jon所述。

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

3 个答案: