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" новый класс "NewClass"
И если вы обратили внимание, то в стилях, есть два квадрата(.kvadrat,.kvadrat_1), это для того, чтобы в первом случае он не менялся... мы использовали ".kvadrat_1", а уже добавлять будем к классу:".kvadrat"
Мы добавили к классу ".kvadrat" класс "NewClass" и у нас получился новый класс ".kvadrat.NewClass" - см чуть выше стили... у нас изменился цвет текста...
Результат:
addclass jquery примеры
Где могут использовать и зачем addclass jquery нужно, мы например использовали это на другом сайте где требуется показать скрыть блок при нажатии.
Еще один пример использование «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>
Результат: