добавить/удалить класс на DIV, если элемент содержит определенный атрибут

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'), как уже упоминалось @ Джон.