.toggleClass()

Что такое .toggleClass() в JQuery?

Данный метод принимает один или несколько аргументов, которые представляют собой имена классов, которые должны быть добавлены или удалены.

Как использовать .toggleClass() в JQuery?

Для использования функции .toggleClass() в JQuery, необходимо выбрать элемент, к которому вы хотите применить эту функцию, с помощью селектора JQuery. Затем вызовите функцию .toggleClass() на этом элементе, указав имя класса, который вы хотите добавить или удалить. Например, чтобы добавить класс "active" к элементу с id "menu", вы можете написать следующий код:

$("#menu").toggleClass("active");

Этот код добавит класс "active" к элементу с id "menu", если он еще не присутствует, и удалит его, если он уже был присутствует.

Примеры использования .toggleClass() в JQuery

Пример 1: Добавление класса при клике на кнопку

<button id="toggle">Toggle class</button>
<div id="content">This is some content</div>

$(document).ready(function(){
  $("#toggle").click(function(){
    // добавление или удаление класса "active" у элемента с id "content" при каждом клике на кнопку
    $("#content").toggleClass("active"); 
  });
});

Пример 2: Открытие и закрытие меню

<button id="toggle-menu">Toggle menu</button>
<nav id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

#menu {
  display: none; // скрытие меню по умолчанию
}
#menu.active {
  display: block; // отображение меню при наличии класса "active"
}

$(document).ready(function(){
  $("#toggle-menu").click(function(){
    // добавление или удаление класса "active" у элемента с id "menu" при каждом клике на кнопку
    $("#menu").toggleClass("active"); 
  });
});

Пример 3: Анимация элементов

<div id="block"></div>

#block {
  width: 100px;
  height: 100px;
  background-color: red;
}

$(document).ready(function(){
  $("#block").click(function(){
    // добавление или удаление класса "active" при каждом клике на элемент и запуск анимации
    $(this).toggleClass("active").animate({ 
      width: "200px",
      height: "200px"
    }, 1000);
  });
});

Пример 4: Переключение табов

<div class="tabs">
  <button class="tab-button active" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
  <button class="tab-button" data-tab="tab3">Tab 3</button>
</div>

<div class="tab-content" id="tab1">
  <p>Content for tab 1 goes here.</p>
</div>

<div class="tab-content" id="tab2">
  <p>Content for tab 2 goes here.</p>
</div>

<div class="tab-content" id="tab3">
  <p>Content for tab 3 goes here.</p>
</div>

.tab-content {
  display: none; // скрытие контента табов по умолчанию
}
.tab-content.active {
  display: block; // отображение контента таба при наличии класса "active"
}

$(document).ready(function(){
  $(".tab-button").click(function(){
    // получение значения атрибута data-tab у кнопки
    var tab_id = $(this).attr("data-tab"); 

    $(".tab-button").removeClass("active");
    $(".tab-content").removeClass("active");

    $(this).addClass("active");

    // добавление класса "active" к выбранной кнопке и соответствующему контенту таба
    $("#" + tab_id).addClass("active"); 
  });
});

Заключение

.toggleClass() - это очень полезная функция JQuery, которая позволяет добавлять и удалять классы HTML элементов легко и быстро. Она может быть использована для создания интерактивных элементов на сайте, таких как кнопки, меню, анимация и переключение табов.