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

0

У меня есть 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" Похоже, что это просто добавление этих классов.

  • 1
    .not() возвращает объект jQuery. Используйте .is(".active") === false
Теги:

3 ответа

1
Лучший ответ

Как насчет?

var isActive = $('a[href="#home"]').hasClass('active');
$(".navigation")
  .toggleClass("navigation-fixed-bottom", isActive)
  .toggleClass("navigation-fixed-top", !isActive);
Поделиться
  • 0
    только что попробовал это, и он добавляет fixed-bottom после fixed-top выход выглядит как эта navigation navigation-fixed-top fixed-bottom и она должна выглядеть как navigation navigation-fixed-bottom
  • 0
    Я отредактировал свой ответ. navigation , fixed-bottom и navigation-fixed-bottom - это разные и совершенно не связанные классы. Вы не можете переключать их частично, если вы этого хотели.
Показать ещё 6 комментариев
1

Вы легко можете переключить класс навигации, используя toggleClass с несколькими классами:

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

Предполагая, что div имеет только один из этих классов, этот код удалит его и добавит другой. Запуск его снова восстановит исходное состояние и так далее.

Поделиться
  • 0
    Я только что попробовал, но кажется, что добавление этих классов не делает ничего другого. Я отредактировал свой вопрос, пожалуйста, посмотрите ...
  • 0
    точнее, вывод выглядит так: navigation navigation-fixed-top fixed-bottom и она должна выглядеть как navigation navigation-fixed-bottom
Показать ещё 2 комментария
0

Я исправил вас в 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.

Поделиться
  • 0
    Это , кажется, хорошо , но я не нужен click функции мне нужно только добавить , что с fixed-bottom классом только если элемент имеет то определенный атрибут и активно, если не делать противоположный a
  • 0
    @Alecs, пожалуйста, просмотрите мое обновление - теперь оно должно быть по желанию

Ещё вопросы

Сообщество Overcoder
Наверх
Меню