添加/刪除類元素是否包含特定屬性

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

怎麼樣？

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

Answer 2

您可以輕鬆地通過使用toggleClass多類切換導航類：

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

假設DIV只有這些類之一，該代碼將其刪除，並添加另一種。再次運行它將恢復原始狀態，依此類推。

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')，如@喬恩提及。