Поменять класс по клику JQuery
Поменять класс по клику на JQuery? А потом вернуть при повторном клике? Легко! Давайте научимся этому.
Сейчас мы научимся менять класс у элемента по клику на нем. В принципе, функция универсальная и можно изменить ее как угодно - менять класс у другого элемента, нескольких элементов, у другого и этого и так далее, на что только хватит вашей фантазии. Давайте для начала создадим элемент:
<div></div>
Это обычный блочный элемент. Ничего особенного, для примера - в самый раз.
Теперь зададим стили:
div { width:100px; height:100px; border:1px solid; } .click { background-color:green; }
Я задал следующие стили для элемента div: ширину, равную 100px, высоту, равную 100px и рамку, для визуального определения нашего блока. Также я задал класс click, которому присвоил фоновый зеленый цвет. То есть элемент, имеющий класс click будет залит зеленым цветом.
Теперь попробуем с вами написать скрипт, который будет выполнять следующее: по клику по блоку div, он будет присваивать ему класс click. При повторном клике - убирать. Все просто. Вот что у меня получилось:
$(document).ready(function(){ $('div').click(function () { $(this).toggleClass('click'); }); });
Скрипт выполняет следующее: когда документ загружен ((document).ready), по клику на элементе div ($('div')), ему присваивается класс click ($(this).toggleClass('click');), а при повторном клике убирается (за это как раз отвечает функция toggleClass - или переключатель).
Не забывайте, что скрипт написан на языке JQuery, а значит нам понадобится предварительно подключить к странице свежую библиотеку. Вот собственно и все.
Приведу весь код:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('div').click(function () { $(this).toggleClass('click'); }); }); </script> <style> div { width:100px; height:100px; border:1px solid; } .click { background-color:green; } </style> </head> <body> <div></div> </body> </html>