Jquery add class to element — Dudom
Определение и применение
jQuery метод .addClass() добавляет один или несколько имен классов для выбранных элементов. Метод может быть также использован в документах XML и формате SVG.
Обращаю Ваше внимание, что этот метод не заменяет, а добавляет класс (присоединяет к указанным элементам). Чтобы добавить к элементу несколько классов, то необходимо перечислить их через пробел.
Удаление класса, либо классов элемента Вы можете произвести с использованием jQuery метода .removeClass().
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| className | Задает одно или несколько имен классов, которые будут добавлены к элементу, или элементам. |
| function (index, currentClassName) | Задает функцию, которая возвращает одно или несколько имен классов, которые будут добавлены.
|
Пример использования
В этом примере с использованием jQuery метода .addClass() мы добавляем два класса к элементу
(абзац) по которому произведён клик.
Результат нашего примера:
Пример добавления класса к элементу (jQuery метод .addClass())
Рассмотрим пример в котором в качестве параметра метода .addClass() передадим функцию:
Результат нашего примера:
Пример получение индекса и имени класса элемента в наборе с использованием метода .addClass(). jQuery DOM методы
Работа с DOM
Работа с CSS
Добавление содержимого
Родители и потомки
Соседи
Разное
Работа с набором
Обход набора
Эффекты jQuery
Управление анимацией
Метод .
addClass() добавляет заданный класс элементу.
См. также урок основы работы с jQuery для более полного понимания.
См. также JavaScript объект classlist, с помощью которого можно добавить класс элементу на чистом JavaScript.
Синтаксис
Дополнительно
Начиная с jQuery1.4 метод addClass может применить заданную функцию к каждому элементу в наборе.
При этом первым параметром функция получит номер элемента в наборе, а вторым параметром — текущий текст элемента:
Имена переменных в функции могут быть любыми.
К примеру, если для первого параметра ‘номер в наборе’ мы дадим имя index — тогда внутри нашей функции будет доступна переменная index, в которой будет лежать номер в наборе для того элемента, который функция обрабатывает в данный момент времени.
Аналогично, если для второго параметра ‘текущие классы элемента’ дать, к примеру, имя className — тогда внутри нашей функции будет доступна переменная className, в которой будут лежать классы того элемента, который функция обрабатывает в данный момент времени:
Атрибут class каждого элемента поменяется на тот, который вернет функция конкретно для этого элемента.
Примеры
Пример
У нашего абзаца совсем нет классов. Давайте добавим ему класс www:
HTML код станет выглядеть так:
Пример
У нашего абзаца уже есть класс. Давайте добавим ему еще и класс www:
HTML код станет выглядеть так:
Пример
У нашего абзаца уже есть два класса. Давайте добавим ему еще и класс www:
HTML код станет выглядеть так:
Пример
У нашего абзаца уже есть класс. Давайте добавим ему еще два класса — www и ggg:
Like this, I have two tabs, so when i click on one it’s active, logic. Now im trying to make difference between active and inactive tab, but not with .css property, but I wanna’ add specific class to clicked tab, like this:
but, no good. Also have in mind that I’m using external css file.
4 Answers 4
First of all don’t use same id on different elements, id ‘s must be unique and try this:
jQuery:
html:
css: you don’t need to define same properties to active class, just define the difference:
You can not have same id for two divs in HTML.
Try changing your HTML like this.
The other issue might be that you’re running your jQuery function before the div element exists.
So either, move the code
below the div’s you want to change, or wrap it in a document ready function.
which will wait till the dom has been created before running your code.
First off, id s should always be unique.
The cause of your issue however, is css specificity. An id rule is more specific than a class one. Try this instead.
Keep in mind though that this will work to overcome the specificity issue. It does not address the fact that you need to get rid of your duplicated id s.
Not the answer you’re looking for? Browse other questions tagged jquery class add or ask your own question.
Linked
Related
Hot Network Questions
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.
0 with attribution required. rev 2020.1.14.35771
Как добавить и удалить класс с помощью jQuery — УЧИТЕСЬ КОДИТЬ
Патрик Морроу
CSS, jQuery
Патрик Морроу
CSS, jQuery
В этом уроке мы рассмотрим чрезвычайно простую, но мощную функцию в jQuery — возможность добавлять и удалять класс.
Например, установите флажок в таблице ниже и посмотрите, как выделяется вся строка:
| Чек | ID | Имя |
|---|---|---|
| 1 | Боб | |
| 2 | Салли |
Следующая структура страницы показывает результаты примера вызова базы данных.
Записи представлены в виде таблицы.
Это создает простую HTML-таблицу следующего вида:
| Чек | ID | Имя |
|---|---|---|
| 1 | Боб | |
| 2 | Салли |
Как видите, есть возможность установить флажок рядом с каждой строкой.
Обратите внимание, что строка еще не выделена, поскольку мы еще не добавили код jQuery для добавления и удаления класса.
Мы можем использовать jQuery, чтобы выделить всю строку, когда флажок установлен. Поскольку Bootstrap был включен, мы можем использовать класс .bg-success, чтобы выделить отмеченную строку зеленым цветом.
Код выглядит следующим образом:
Строка 1: мы проверяем, был ли установлен флажок
Строка 2: устанавливаем переменную с именем row как ближайшую tr
Строка 3: проверяем, установлен ли флажок
Строка 4: добавьте класс .
bg-success в строку
Строка 5: в противном случае флажок не установлен
Строка 6: удалите класс .bg-success из строки
Результат выглядит следующим образом :
| Чек | ID | Имя |
|---|---|---|
| 1 | Боб | |
| 2 | Салли |
Полный сценарий выглядит следующим образом:
На самом деле я использую это довольно часто, когда у меня есть таблица со значком удаления. Щелчок по значку удаления выделит строку красным цветом, а затем медленно анимирует удаление строки. Попробуйте ниже.
| ID | Имя | Удалить |
|---|---|---|
| 1 | Боб | |
| 2 | Салли |
Учить больше
HELP KEEP CODING.