ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Jquery addclass добавление класса

Мы уже говорили о том. Как добавить класс в класс в Js, сегодня поговорим о том, как добавить класс в jquery для этого нам понадобится «addclass»

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

<script>

$("#example").addClass("NewClass"); //добавит класс NewClass элементу с идентификатором example

$(".example").addClass("NewClass"); //добавит класс NewClass всем элементам с классом example (то есть, у этих элементов станет по меньшей мере два класса: class="example NewClass".

</script>

addclass jquery примеры

Давайте на пример разберем addclass jquery, нам нужен какой-то обьект... давайте сделаем квадрат и стили к нему, например такой:

Код:

<div class="kvadrat_1">kvadrat_1</div>

<style type="text/css">.kvadrat,.kvadrat_1 { background: #ec0909; width: 100px; height: 100px;} .kvadrat.NewClass{color: #ffffff}</style>

Результат:

kvadrat_1

2.

Вторым шагом нам нужно написать скрипт, в котором добавим к уже существующему классу "kvadrat" новый класс "NewClass"

И если вы обратили внимание, то в стилях, есть два квадрата(.kvadrat,.kvadrat_1), это для того, чтобы в первом случае он не менялся... мы использовали ".kvadrat_1", а уже добавлять будем к классу:".kvadrat"

<script>$(".kvadrat").addClass("NewClass");</script>

Мы добавили к классу ".kvadrat" класс "NewClass" и у нас получился новый класс ".kvadrat.NewClass" - см чуть выше стили... у нас изменился цвет текста...

Результат:

kvadrat

addclass jquery примеры

Где могут использовать и зачем addclass jquery нужно, мы например использовали это на другом сайте где требуется показать скрыть блок при нажатии.

3.

Еще один пример использование «addclass jquery» добавление класса!

Давайте возьмем предыдущий квадрат и пусть это будет «kvadrat_2» изменим его позиционирование относительно левого края… добавлением класса NewClass_2

<div class="kvadrat_2">kvadrat_2</div>

<style type="text/css">.NewClass_2{ margin-left: 354px;} .kvadrat_2 { background: #ec0909; width: 100px; height: 100px; color: #ffffff}</style>

<script>$(".kvadrat_2").addClass("NewClass_2");</script>

Результат:

kvadrat_2

С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
jquery addclass jquery addclass jquery addclass function addclass jquery примеры

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019