Как добавить class с jQuery

Бывает что вам нужно изменять вид чего либо при нажатии на кнопку, а потом возвращать обратно. Или не возвращать, а просто изменить, и может быть даже не при нажатии на кнопку, а при каком либо другом действии. Рассмотрим на примере.
У нас есть div с классом wrap:

 <div class='wrap'></div> 

А вам нужно чтобы было так:

 <div class='wrap xxx'></div> 

В jQuery это делается при помощи addClass. Имейте ввиду что реестр должен быть строго таким: add – с строчной буквы, Class – с заглавной буквы!
Добавляется класс таким образом:

Если добавить такой скрипт, то класс будет добавляться всем блокам wrap при загрузке страницы.
Если же вы хотите чтобы данный класс добавлялся при нажатии на кнопку, например на эту:

 <button class='add_xxx'></button> 

то следует написать скрипт так:

<script>
$(".add_xxx").click(function(){
  $( ".wrap" ).addClass( "xxx" );
});
</script>

Данный скрипт следует нужно дописать самый конец html файла, перед закрывающим тегом

 </body> 

Если же вы хотите дописать его между тегами head, то он должен выглядеть так:

<script>
$( document ).ready(function() {
   $(".add_xxx").click(function(){
     $( ".wrap" ).addClass( "xxx" );
   });
});
</script>

В данной статье я показал как добавить класс при помощи jQuery. Думаю подробнее уже нельзя расписать. Пробуйте, а если не получится спрашивайте в комментарии!

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>