jQuery как изменить класс активному элементу?

Довольно часто возникает необходимость стилизовать "активный" элемент и в этом посте мы разберем случаи активизации элемента при наведении и нажатии на его.

HTML код демо-примера:

Код для того чтобы было понятно на какие элементы идет нажатие/наведение курсора.

  <div id="tabs">
      <span class="tab">Вкладка №1</span>
      <span class="tab">Вкладка №2</span>
      <span class="tab">Вкладка №3</span>
  </div>

jQuery как изменить класс активному элементу при наведении на него мышкой

В случае наведения мышкой на элемент, должно происходить следующее. При наведении на элемент, мы добавим к нему класс .active, а при уводе курсора мыши с элемента мы этот класс уберем.
Таким образом у активного элемента всегда будет класс .active, который вы можете стилизовать в соответствии с вашим случаем.

    $("#tabs .tab").hover(
    	function () { $(this).addClass("active") },   //при наведении курсора на элемент
    	function () { $(this).removeClass("active") } //при уводе курсора с элемента
    );

Для решения поставленной задачи мы использовали jQuery функцию hover(), которая состоит из двух событий, наведение курсора и увод курсора, каждое событие описывается в отдельной анонимной функции внутри hover.

jQuery как изменить класс активному элементу при нажатии на него мышкой

Чтобы решить поставленную задачу необходимо обработать событие click по элементу. По клику на элемент мы добавим к нему класс .active если он не имел этого класса, па если он был активен, то удалим.

    $("#tabs").on("click", ".tab", function(){
    	$(this).toggleClass("active");
    });

Для переключение класса активного элемента мы использовали функцию .toggleClass("active"), которая проверяет имеет ли выбранный элемент указанный класс и если имеет удаляет его, а если нет добавляет ему указанный класс.

jQuery как изменить класс активному элементу при нажатии на него мышкой, а остальным убрать класс active

Задача схожа с прошлой, только в этом случае при нажатии на элемент, мы будем удалять активный класс во всех остальных вкладках.

    $("#tabs").on("click", ".tab", function(){
    	$("#tabs .tab").removeClass("active"); //удаляем класс во всех вкладках
    	$(this).addClass("active"); //добавляем класс текущей (нажатой)
    });

Если у вас остались вопросы, пишите их в комментариях, обязательно отвечу!

Метки: jQuery

Рубрика: Как сделать?