Jquery add class to element

Определение и применение

jQuery метод .addClass() добавляет один или несколько имен классов для выбранных элементов. Метод может быть также использован в документах XML и формате SVG.

Обращаю Ваше внимание, что этот метод не заменяет, а добавляет класс (присоединяет к указанным элементам). Чтобы добавить к элементу несколько классов, то необходимо перечислить их через пробел.

Удаление класса, либо классов элемента Вы можете произвести с использованием jQuery метода .removeClass().

jQuery синтаксис:

Добавлен в версии jQuery

Значения параметров

Параметр Описание
className Задает одно или несколько имен классов, которые будут добавлены к элементу, или элементам.
function (index, currentClassName) Задает функцию, которая возвращает одно или несколько имен классов, которые будут добавлены.

  • index – возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • currentClassName – возвращает текущее имя класса выбранного элемента.

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

В этом примере с использованием jQuery метода .addClass() мы добавляем два класса к элементу

(абзац) по которому произведён клик.

Результат нашего примера:

Пример добавления класса к элементу (jQuery метод .addClass())

Рассмотрим пример в котором в качестве параметра метода .addClass() передадим функцию:

Читайте также:  Программные поисковые сервисы кратко

В этом примере с использованием jQuery метода .addClass() мы нашли все элементы

Результат нашего примера:

Пример получение индекса и имени класса элемента в наборе с использованием метода .addClass(). jQuery DOM методы

Работа с DOM

Работа с CSS

Добавление содержимого

Родители и потомки

Соседи

Разное

Работа с набором

Обход набора

Эффекты jQuery

Управление анимацией

Метод .addClass() добавляет заданный класс элементу.

См. также урок основы работы с jQuery для более полного понимания.

См. также JavaScript объект classlist, с помощью которого можно добавить класс элементу на чистом JavaScript.

Синтаксис

Дополнительно

Начиная с jQuery1.4 метод addClass может применить заданную функцию к каждому элементу в наборе.

При этом первым параметром функция получит номер элемента в наборе, а вторым параметром – текущий текст элемента:

Имена переменных в функции могут быть любыми.

К примеру, если для первого параметра ‘номер в наборе’ мы дадим имя index – тогда внутри нашей функции будет доступна переменная index, в которой будет лежать номер в наборе для того элемента, который функция обрабатывает в данный момент времени.

Аналогично, если для второго параметра ‘текущие классы элемента’ дать, к примеру, имя className – тогда внутри нашей функции будет доступна переменная className, в которой будут лежать классы того элемента, который функция обрабатывает в данный момент времени:

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

Примеры

Пример

У нашего абзаца совсем нет классов. Давайте добавим ему класс www:

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

Пример

У нашего абзаца уже есть класс. Давайте добавим ему еще и класс www:

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

Читайте также:  Ace combat assault horizon прохождение

Пример

У нашего абзаца уже есть два класса. Давайте добавим ему еще и класс 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.

Читайте также:  Топ камер для андроид 2018

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.1.14.35771

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

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

Adblock detector