Создание сайтов. Веб Студия «sOn»

Категории
Информация

По клику добавить класс другому элементу - jQuery

Автор admin 16.06.2017 0 Комментарии

 

Как по клику на элемент добавить новый класс другому элементу с использованием JavaScript?

 

Приведу простой пример в помощь верстальщикам сайтов.

 

НАЖМИТЕ СЮДА

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

 

HTML:

<p class="class1">Пример1</p>
<p class="class2">Текст, выпадающее меню, картинки...</p>

CSS:

.class1 {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
.class1:hover { 
    background: rgba(0, 0, 0, 0.06); 
}
.class2 {
    display: none;
}
.class2.aktivnyi {
    display: block;
}

jQuery:

<script>
        $(document).ready(function(){
            $(".class1").click(function(){
                $(".class2").toggleClass("aktivnyi"); return false;
            });
        });
</script> 

Комментарий