Как добавить класс jquery
Перейти к содержимому

Как добавить класс jquery

  • автор:

Добавление класса элементу в jQuery

Напоминаю, что в атрибуте class в HTML коде можно писать несколько классов через пробел.

Представим себе такую ситуацию — вы хотите добавить новый класс к имеющимся, не затерев их при этом. В этом случае, просто взять и сделать .attr(‘class’, ‘new-class’) не получится (воспользовавшись методом attr ) — вы затрете те классы, которые уже есть в атрибуте.

Можно, конечно же, сначала считать классы, которые там есть, затем добавить к ним наш класс через пробел и записать все обратно в атрибут, но есть способ проще — в jQuery для таких вещей предусмотрен метод addClass .

Метод addClass позволяет добавить класс элементу (или элементам), не затерев при этом другие классы. Класс, который вы хотите добавить в элемент, принимается параметром этого метода.

В следующем примере у нас есть элемент с двумя классами — class=»www zzz» :

Мы можем добавить к нему еще и третий класс — kkk . В результате содержимое атрибута станет таким — class=»www zzz kkk» :

$(‘#test’).addClass(‘kkk’);

HTML код станет выглядеть так:

Добавьте всем li класс test .

.addClass()

Добавляет класс(ы) каждому выбранному элементу страницы.

version added: 1.0 .addClass( className )
version added: 1.4 .addClass( function(index, currentClass) )

function(index, currentClass)

Тип: Функция
Добавляет классы, список которых возвращает заданная пользователем функция. Возвращаемое значение должно представлять из себя строку, с перечислением добавляемых классов через пробел. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, class — текущий класс(ы) элемента.

Тут важно заметить, что данный метод не замещает классы. Он просто добавляет класс, к уже существующим.

Одновременно может быть добавлен один и более классов, разделённые через пробел:

$("p").addClass("myClass yourClass");

Часто в связке с данным методом, используется .removeClass() для удаления одних классов и добавления других:

$("p").removeClass("myClass noClass").addClass("yourClass");

В данном примере у параграфа удаляются элементы myClass и noClass; добавляется класс yourClass.

Начиная с jQuery 1.4, метод.addClass() в качестве аргумента может принимать функцию.

$("ul li").addClass(function(index) < return "item-" + index; >);

Примеры

Пример: Добавляем класс “selected” к элементам, подходящим под селектор.

    p < margin: 8px; font-size:16px; >.selected < color:blue; >.highlight   

Hello

and

Goodbye

Демо:

Пример: Добавляем класс “selected” и “highlight” к элементам, подходящим под селектор.

    p < margin: 8px; font-size:16px; >.selected < color:red; >.highlight   

Hello

and

Goodbye

Демо:

Пример: Передаём в .addClass() функцию, которая вычислит элемент у которого есть класс “red” и прибавит к нему класс “green”.

    div < background: white; >.red < background: red; >.red.green   
This div should be white
This div will be green because it now has the "green" and "red" classes. It would be red if the addClass function failed.
This div should be white

There are zero green divs

Демо:

Связанные уроки:

Используем jQuery для изменения стилей поля ввода формы при нажатии

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

Фон, который всегда растягивается на всю страницу

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

Адаптивная галерея изображений

В данном уроке мы разберемся, как создать адаптивную галерею изображений с каруселью миниатюр. Галерея будет подстраиваться под размер окна просмотра, также можно будет отключить или включить карусель миниатюр. Навигация может осуществляться с клавиатуры.

Шпаргалка jQuery:

  • Ajax
    • Global Ajax Event Handlers
      • .ajaxComplete()
        • :button
        • :checkbox
        • :checked
        • :disabled
        • :enabled
        • :file
        • :focus
        • :image
        • .serializeArray()
        • .serialize()
        • jQuery.param()
        • jQuery.ajax()
        • jQuery.ajaxSetup()
        • jQuery.ajaxPrefilter()
        • jQuery.ajaxTransport()
        • jQuery.get()
        • jQuery.post()
        • .load()
        • jQuery.getJSON()
        • jQuery.getScript()
        • .serialize()
        • .serializeArray()
        • jQuery.param()
        • .val()
        • .blur()
        • .change()
        • .focus()
        • .addClass()
        • .hasClass()
        • .removeClass()
        • .toggleClass()
        • .html()
        • .removeAttr()
        • .prop()
        • .removeProp()
        • .attr()
        • .val()
        • Collection Manipulation
          • jQuery.param()
          • .data()
          • .removeData()
          • Class Attribute
            • .addClass()
            • .hasClass()
            • .removeClass()
            • .toggleClass()
            • .clone()
            • .wrap()
            • .wrapAll()
            • .wrapInner()
            • .unwrap()
            • .append()
            • .appendTo()
            • .html()
            • .text()
            • .prepend()
            • .prependTo()
            • .after()
            • .before()
            • .insertAfter()
            • .insertBefore()
            • .unwrap()
            • .remove()
            • .empty()
            • .detach()
            • .replaceAll()
            • .replaceWith()
            • .removeProp()
            • .removeAttr()
            • .prop()
            • .attr()
            • .val()
            • .css()
            • .height()
            • .width()
            • .innerHeight()
            • .innerWidth()
            • .outerHeight()
            • .outerWidth()
            • .offset()
            • .position()
            • .scrollLeft()
            • .scrollTop()
            • .height()
            • .width()
            • .innerHeight()
            • .innerWidth()
            • .outerHeight()
            • .outerWidth()
            • jQuery.holdReady()
            • jQuery()
            • jQuery.noConflict()
            • jQuery.when()
            • .addClass()
            • .hasClass()
            • .removeClass()
            • .toggleClass()
            • .css()
            • .height()
            • .width()
            • .innerHeight()
            • .innerWidth()
            • .outerHeight()
            • .outerWidth()
            • .offset()
            • .position()
            • .scrollLeft()
            • .scrollTop()
            • .clearQueue()
            • .dequeue()
            • .data()
            • jQuery.hasData()
            • jQuery.removeData()
            • jQuery.dequeue()
            • .removeData()
            • jQuery.data()
            • .queue()
            • Custom
              • .clearQueue()
              • .dequeue()
              • .queue()
              • .clearQueue()
              • .dequeue()
              • jQuery.dequeue()
              • jQuery.data()
              • .queue()
              • jQuery.proxy()
              • callbacks.add()
              • callbacks.disable()
              • callbacks.disabled()
              • callbacks.empty()
              • callbacks.fire()
              • callbacks.fired()
              • callbacks.fireWith()
              • callbacks.has()
              • callbacks.lock()
              • callbacks.locked()
              • callbacks.remove()
              • jQuery.Callbacks()
              • deferred.always()
              • deferred.done()
              • deferred.fail()
              • deferred.notify()
              • deferred.notifyWith()
              • deferred.progress()
              • deferred.promise()
              • deferred.reject()
              • deferred.rejectWith()
              • deferred.resolve()
              • deferred.resolveWith()
              • deferred.state()
              • deferred.then()
              • Basics
                • Универсальный селектор (“*”)
                • jQuery( «.class» )
                • Селектор элементов (“element”)
                • Селектор ID (“#id”)
                • Множественный (“selector1, selector2, selectorN”)
                • Селектор по префиксу [name|=”value”]
                • Селектор содержащий значение [name*=»value»]
                • Селектор, содержащий слово [name~=»value»]
                • Селектор по атрибуту, на конце которого [name$=»value»]
                • Селектор по равенству [name=»value»]
                • Селектор по неравенству [name!=»value»]
                • Значение атрибута начинается с [name^=»value»]
                • Селектор по наличию атрибута [name]
                • Множественный селектор по атрибуту [name=»value»][name2=»value2″]
                • :animated Selector
                • :eq()
                • :even
                • :first
                • :focus
                • :gt()
                • :header
                • :lang()
                • :last
                • :lt()
                • :first-child
                • :first-of-type
                • :last-child
                • :last-of-type
                • :nth-child()
                • :nth-last-child()
                • :nth-last-of-type()
                • :nth-of-type()
                • :only-child
                • :only-of-type
                • :contains()
                • :empty
                • :has()
                • :parent
                • Browser Events
                  • .resize()
                  • .scroll()
                  • .ready()
                  • .bind()
                  • .delegate()
                  • jQuery.proxy()
                  • .off()
                  • .one()
                  • .trigger()
                  • .triggerHandler()
                  • .unbind()
                  • .undelegate()
                  • event.currentTarget
                  • event.data
                  • event.delegateTarget
                  • event.isDefaultPrevented()
                  • event.isImmediatePropagationStopped()
                  • event.isPropagationStopped()
                  • event.metaKey
                  • event.namespace
                  • event.pageX
                  • event.pageY
                  • event.preventDefault()
                  • event.relatedTarget
                  • event.result
                  • event.stopImmediatePropagation()
                  • event.stopPropagation()
                  • event.target
                  • event.timeStamp
                  • event.type
                  • event.which
                  • .blur()
                  • .change()
                  • .focus()
                  • .focusin()

                  Добавление и удаление классов на jQuery

                  Статья, в которой разберем методы jQuery для управления классами элементов. Рассмотрим это как c использованием универсальных методов ( attr() , removeAttr() , prop() ), так и методов специально предназначенных для этого: addClass , hasClass() , removeClass() , toggleClass() .

                  Что такое классы HTML-элементов?

                  Класс – это некоторый признак, который можно добавить к элементам, а затем использовать его в CSS (для добавления к ним стилей) или JavaScript.

                  В HTML-коде установка класса элементу осуществляется через атрибут class .

                  Пример, в котором установим HTML-элементу класс container :

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

                  Имя класса всегда должно начинаться с буквы A-Z или a-z. В качестве символов в имени класса разрешается использовать буквы A-Z или a-z, цифры (0-9), дефис («-«) и подчеркивание («_»).

                  Кроме этого, при указании класса обращайте внимание на то, что он является регистрозависимым. Т.е., например, класс Alert это не одно и тоже что alert .

                  Классы – это один из самых частых способов выбора элементов на странице. Они очень часто используются как в CSS, так и в JavaScript.

                  Пример использования классов:

                     

                  .

                  .

                  .

                  Работа с классами через атрибут class

                  В jQuery выполнить операции над классами элементов можно с помощью методов attr и removeAttr. Данные методы предназначены для работы с любыми атрибутами, а не только с class .

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

                  Пример работы с атрибутом class :

                     

                  Работа с классами через DOM-свойство className

                  Другой вариант – это работать с классами элемента не через атрибут class , а через DOM-свойство className . Этот вариант более предпочтительный чем вариант работы с классами через атрибут class . Но он также, как и предыдущий инструмент позволяет оперировать с ними, только как с целой строкой. Более подробно почитать про атрибуты и DOM-свойства можно в этой статье.

                  Если кратко, то сначала нужно разобраться что такое DOM.

                  DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM «на лету» и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.

                  При создании браузером DOM, HTML-теги становятся объектами, а HTML-атрибуты – свойствами этих объектов. Обычно имена атрибутов и соответствующих им DOM-свойств совпадают. Но, например, атрибут class и соответствующее ему DOM-свойство className нет. Связано с тем, что раньше ключевые слова нельзя было использовать в качестве названия DOM-свойств. Из-за этого было выбрано в качестве названия className . В последствии, когда это ограничение убрали имя DOM-свойству не стали изменять и сейчас она имеет тоже самое название.

                  В jQuery для работы с DOM-свойствами используется метод prop.

                  Рассмотрим применения данного метода для управления классами элемента.

                     

                  Работа с классами через специальные методы

                  В jQuery имеются специальные методы, предназначенные именно для работы с классами. Всего их четыре. Это addClass , hasClass , removeClass и toggleClass .

                  Эти методы очень нужны, когда вам нужно выполнить детальную работу с классами, например, добавить один класс к элементу или его удалить.

                  Метод addClass

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

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

                  Синтаксис метода addClass :

                  // 1 вариант .addClass( className ) // className (тип: Строка) - один или несколько разделенных пробелом классов, которые нужно добавить к каждому элементу текущего набора // 2 вариант .addClass( function ) // function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые требуется добавить к каждому элементу текущего набора // Синтаксис функции: // Function( Integer index, String currentClassName ) => String // index – индекс элемента в наборе // currentClassName – текущие имена классов у элемента // Ключевое слово this внутри функции указывает на текущий элемент набора.

                  Например, добавим класс при клике на элемент:

                  -1-
                  -2-
                  -3-

                  Пример, в котором добавим несколько классов ко всем элементам .btn на странице:

                  // добавление классов btn-lg и btn-primary ко всем элементам .btn $('.btn').addClass('btn-lg btn-primary');

                  Пример, в котором добавим ко всем элементам li , расположенных в #browsers , класс browser-item , но за исключением тех, у которых уже есть какой-то класс:

                  Метод hasClass

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

                  Если указанный класс есть у элемента, то метод hasClass возвращает true . В противном случае он возвращает false .

                  При применении его к набору элементов, он проверяет наличие указанного класса у всех них. И если указанный класс есть хотя бы у одного элемента этого набора данный метод возвращает true . В противном случае, он возвращает false .

                  Синтаксис метода hasClass :

                  .hasClass( className ) // className (тип: Строка) – имя класса, наличие которого нужно проверить у элементов текущего набора

                  Пример, в котором проверим наличие класса meow у элемента #say :

                    

                  Если необходимо проверить наличие нескольких классов у элемента, то это выполняются с помощью использования нескольких методов hasClass :

                  var result = $('#say').hasClass('meow') && $('#say').hasClass('moo'); console.log(result); // true (у элемента есть классы meow и moo)

                  Метод removeClass

                  Метод removeClass предназначен для удаления класса, нескольких или всех классов у каждого элемента текущего набора.

                  Синтаксис метода removeClass :

                  // 1 вариант .removeClass( [className ] ) // className (тип: Строка) – один или несколько разделённых с помощью пробела классов, которые нужно удалить у элементов набора // 2 вариант .removeClass( function ) // function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые нужно удалить // Синтаксис функции: // Function( Integer index, String className ) => String // index – индекс элемента в наборе // className – имена классов у элемента // Ключевое слово this внутри функции указывает на текущий элемент набора

                  Если при вызове метода removeClass ничего ей не передать в качестве аргумента, то она удалит все классы у каждого элемента текущего набора.

                  Например, удалим класс text-center у всех элементов p :

                  $('p').removeClass('text-center');

                  Например, уберём сразу несколько классов у элементов div :

                  $('div').removeClass('alert alert-warning');

                  Например, удалим все классы у элементов .message , контент у которых равен пустой строке:

                  .

                  Метод toggleClass

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

                  Синтаксис метода toggleClass :

                  // 1 вариант .toggleClass( className ) // className (тип: String) - один или несколько классов (разделенных пробелами), которые необходимо переключить у каждого элемента в текущем наборе. // 2 вариант .toggleClass( className, state ) state (тип: Boolean) – логическое значение, определяющее, должен ли класс быть добавлен или удален // 3 вариант .toggleClass( function [, state ] ) // function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые требуется переключить у элемента. В качестве аргументов получает индекс элемента в текущем наборе, текущее значение className и состояние. // Синтаксис функции: Function( Integer index, String className, Boolean state ) => String // index – индекс элемента в текущем наборе // className – текущее значение className элемента // state – значение состояния, установленного посредством второго аргумента при вызове метода toggleClass (если второй аргумент опустить, то данный параметр будет иметь значение undefined) // Внутри функции ключевое слово this указывает на текущий элемент набора

                  Пример, в котором переключим класс alert-warning у элементов .alert :

                  1.
                  2.
                  .

                  Данный код без использования метода toggleClass можно записать так:

                  $('alert').each( function () { var _this = $('this'); // текущий элемент if (_this.hasClass('alert-warning')) { _this.removeClass('alert-warning'); } else { _this.addClass('alert-warning'); } });

                  Кроме этого, метод toggleClass может вести себя как addClass или removeClass . Это состояние можно установить посредством задания параметру state соответственно значения true или false .

                  Т.е. если параметру state установить true , то метод toggleClass будет только добавлять указанный класс к элементу, если у него его нет. И наоборот, если параметру state задать false , то метод toggleClass будет только удалять указанный класс, т.е. он будет вести себя как removeClass .

                  Пример, в котором добавим класс text-right только к тем элементам p на странице, у которых его нет:

                  $('p').toggleClass('text-right', true);

                  Пример, в котором удалим класс text-center только у тех элементов div , у которых он есть:

                  $('div').toggleClass('text-center', false);

                  Пример, в котором переключим класс text-lead с помощью функции. Выполним это для элементов .text , у которых размер шрифта равен 24px:

                    

                  .

                  .

                  .

                  Темы, связанные с этой:

                  • Методы jQuery для работы с атрибутами
                  • Методы jQuery для управления DOM-свойствами элементов

                  Если статья понравилась, то поделитесь ей в социальных сетях:

                  Комментарии: 3

                  02.04.2019, 10:00

                  Я прикрепил кнопку гамбургер к выпадающему меню, которое закрывается от клика по экрану в любом месте, но когда так закрываешь меню, кнопка не сворачивается обратно из крестика в полоски, только если кликнешь по кнопке, тогда сработает анимация. Какой код можно вставить в java скрипт чтобы исправить это? Сейчас стоит вот такой код
                  $(document).ready(function () {
                  $(«.hs-menubar»).hsMenu();
                  $(«.hamburger»).click(function(){
                  $(this).toggleClass(«is-active»);
                  });
                  });

                  Александр Мальцев
                  02.04.2019, 13:53

                  Вы привели только часть кода. Сложно предугадать, как вы там это реализовали…
                  Ну, например можно поступить так: в обработчик события, которое закрывает меню при клике по экрану в любом месте вне меню, можно добавить код для вызова некоторого кастомного события:

                  $('.hamburger').trigger('close');

                  Для обработки этого события добавить следующий код:

                  $('.hamburger').on('close', function(){ if $(this).hasClass('is-active') { $(this).removeClass('is-active'); } });

                  02.04.2019, 18:26

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

                  CSS /*Кнопка*/ .col { position: fixed; margin-top: 10px; margin-left: 20px; display: block; float:left; z-index: 50; } .container{ width: 100%; max-width: 940px; margin: 0 auto; position: relative; text-align: center; } .hamburger .line{ width: 33px; height: 2px; background-color: #444; display: block; margin: 8px auto; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .hamburger:hover{ cursor: pointer; } #hamburger-6.is-active{ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #hamburger-6.is-active .line:nth-child(2){ width: 0px; } #hamburger-6.is-active .line:nth-child(1), #hamburger-6.is-active .line:nth-child(3){ -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } #hamburger-6.is-active .line:nth-child(1){ -webkit-transform: translateY(13px); -ms-transform: translateY(13px); -o-transform: translateY(13px); transform: translateY(7px); } #hamburger-6.is-active .line:nth-child(3){ -webkit-transform: translateY(-13px) rotate(90deg); -ms-transform: translateY(-13px) rotate(90deg); -o-transform: translateY(-13px) rotate(90deg); transform: translateY(-13px) rotate(90deg); } /*Кнопка*/ /*Выпадающее меню*/ *{margin:0;padding:0} body {background: #156395;} .hs-menubar { position:fixed; background:#fff; width:100%; height:60px; border-bottom: 1px solid #ccc; z-index: 20; } .hs-navigation { position:fixed; width:350px; height: 92vh; background:#fff; top: 61px; left:-355px; z-index:999; overflow:scroll; z-index: 5; } .hs-navigation.open { left:0;} .dim-overlay{display:none;} .dim-overlay:before { content:""; position:fixed; background-color:rgba(0,0,0,.4); height:100vh; left:0; top:0; width:100%; overflow:hidden; z-index:2; } .nav-links li a { display:block; background: #fff; padding: 12px; padding-left: 45px; text-decoration: none; font-size: 17px; font-family: verdana, segoe ui, sans-serif; color: #555; box-shadow: 43px 0px 0px 1px #ddd; } .nav-links li a:hover { background: #ddd; } /*Выпадающее меню*/ JS (function(a){a.fn.hsMenu=function(b){var c=a.extend({bgFading:true,outClickToClose:true,fixedMenubar:true,},b);return this.each(function(){var g,i,d,f,j;g=a(".hs-navigation");if(c.bgFading==true){j=e();a(j).addClass("dim-overlay").insertAfter(g)}if(c.fixedMenubar==true){a(this).addClass("sticky")}a(".toggle").click(function(){a(this).toggleClass("ripple-out");$reveal=a(this).attr("data-reveal");$allRevealable=".grid-items, .user-penal, .user-info";if(a($reveal).hasClass("fadeInUp")){a($reveal).removeClass("fadeInUp").fadeOut()}else{a($reveal).fadeIn().addClass("fadeInUp")}a($allRevealable).not($reveal).removeClass("fadeInUp ripple-out").fadeOut()});a(".hamburger").click(function(){a(this).toggleClass("ripple-out");a(g).toggleClass("open");a(j).toggle(0)});var k=a(".search-box").find("input");a(".search-trigger").click(function(){a(this).toggleClass("ripple-out");a(this).find(".zmdi").removeClass("zmdi-search").addClass("zmdi-close");if(a(this).hasClass("ripple-out")){a(".search-box").animate({width:"250px",},0,function(){k.focus()})}else{a(".search-box").animate({width:"0px",},0);a(this).find(".zmdi").removeClass("zmdi-close").addClass("zmdi-search")}});a(k).keyup(function(){if(a(this).val().length>0){a(".search-submit").attr("disabled",false)}else{a(".search-submit").attr("disabled",true)}});if(c.outClickToClose==true){a(window).click(function(l){if(a(l.target).closest(".more-trigger, .grid-trigger, .user-penal, .grid-items, .hamburger, .hs-navigation, .hs-menubar, .hs-user, .user-info").length){return}a(".user-penal, .grid-items, .user-info").fadeOut().removeClass("fadeInUp");a(g).removeClass("open");a(j).fadeOut()})}if(c.navControls==false){i=e();d=h();f=h();a(d).html(" ").addClass("nav-fixed").appendTo(i);a(f).addClass("nav-full").html(" ").appendTo(i);a(i).addClass("nav-controls").prependTo(".hs-navigation");a(".nav-fixed").on("click",function(l){l=a(this).find(".zmdi");if(l.hasClass("zmdi-unfold-more")){a(g).animate({position:"fixed",top:0,},0,function(){a(g).css({overflow:"auto",});l.removeClass("zmdi-unfold-more").addClass("zmdi-unfold-less")})}else{a(g).animate({top:"50px",},0,function(){a(g).css({overflow:"hidden",});l.addClass("zmdi-unfold-more").removeClass("zmdi-unfold-less")})}});a(".nav-full").click(function(l){l=a(this).find(".zmdi");if(l.hasClass("zmdi-crop-free")){l.removeClass("zmdi-crop-free").addClass("zmdi-aspect-ratio-alt");a(".hs-navigation").width("320")}else{a(".hs-navigation").width("270px");l.addClass("zmdi-crop-free").removeClass("zmdi-aspect-ratio-alt")}})}a(".hs-user").click(function(){var l=a(this).find("img").clone();a(".profile-pic").html(l)});a(".its-parent").click(function(){a(this).siblings(".its-children").slideToggle();a(this).toggleClass("downed")});function e(){return document.createElement("div")}function h(){return document.createElement("button")}})}})(jQuery); $(document).ready(function () { $(".hs-menubar").hsMenu(); $(".hamburger").click(function(){ $(this).toggleClass("is-active"); }); });
                  Популярное
                  1. 1. Слайдер для сайта на чистом CSS и JavaScript 372.9K
                  2. 2. Модальное окно Bootstrap для сайта 369.5K
                  3. 3. Bootstrap 3 — Navbar (горизонтальное меню) 368.3K
                  4. 4. Маска ввода для HTML элемента input 356.5K
                  5. 5. CSS медиа-запросы (media queries) 345.1K
                  6. 6. Форма обратной связи для сайта с отправкой на почту 329.2K
                  7. 7. Bootstrap — Carousel (карусель) 298.4K

                  .addClass()

                  Description: Adds the specified class(es) to each element in the set of matched elements.

                  version added: 1.0 .addClass( className )

                  className
                  One or more space-separated classes to be added to the class attribute of each matched element.

                  version added: 3.3 .addClass( classNames )

                  classNames
                  An array of classes to be added to the class attribute of each matched element.

                  version added: 1.4 .addClass( function )

                  function
                  Type: Function( Integer index, String currentClassName ) => String

                  A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

                  version added: 3.3 .addClass( function )

                  function
                  Type: Function( Integer index, String currentClassName ) => String | Array

                  A function returning one or more space-separated class names or an array of class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

                  It’s important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

                  Before jQuery version 1.12/2.2, the .addClass() method manipulated the className property of the selected elements, not the class attribute. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).

                  As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the class attribute is used instead. So, .addClass() can be used on XML or SVG documents.

                  More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

                  $( "p" ).addClass( "myClass yourClass" );

                  This method is often used with .removeClass() to switch elements’ classes from one to another, like so:

                  $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

                  Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.

                  As of jQuery 1.4, the .addClass() method’s argument can receive a function.

                  $( "ul li" ).addClass(function( index )
                  return "item-" + index;
                  >);

                  Examples:

                  Add the class "selected" to the matched elements.

Добавить комментарий

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