jQuery(function($) {
$(".button1").click(function() {
$(".imgEx1").addClass("active");
$(".imgEx2").removeClass("active");
$(".imgEx3").removeClass("active");
});
$(".button2").click(function() {
$(".imgEx1").removeClass("active");
$(".imgEx2").addClass("active");
$(".imgEx3").removeClass("active");
});
$(".button3").click(function() {
$(".imgEx1").removeClass("active");
$(".imgEx2").removeClass("active");
$(".imgEx3").addClass("active");
});
});
.active {
color: blue;
}
span {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="imgEx1 active">Лак</p>
<p class="imgEx2">Ваниль</p>
<p class="imgEx3">Мёд</p>
<p>
<span class="button1">Лак</span>
<span class="button2">Ваниль</span>
<span class="button3">Мёд</span>
</p>
Как вариант
jQuery(function($) {
$(".button").click(function() {
// Убираем класс со всех
$(".imgEx").removeClass("active")
// Выставляем нужному
.filter(".imgEx" + $(this).data("idx")).addClass("active");
});
});
.active {
color: blue;
}
span {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="imgEx imgEx1 active">Лак</p>
<p class="imgEx imgEx2">Ваниль</p>
<p class="imgEx imgEx3">Мёд</p>
<p>
<span class="button" data-idx="1">Лак</span>
<span class="button" data-idx="2">Ваниль</span>
<span class="button" data-idx="3">Мёд</span>
</p>
Я так понял надо как то сократить код.
Будет работать при "правильной" разметке.
$('.button').click(function() {
$('.img').eq($(this).index('.button')).addClass('active')
.siblings('.img').removeClass('active')
})
.active {
color: blue;
}
span {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgs">
<p class="img imgEx1 active">Лак</p>
<p class="img imgEx2">Ваниль</p>
<p class="img imgEx3">Мёд</p>
</div>
<div class="buttons">
<span class="button button1">Лак</span>
<span class="button button2">Ваниль</span>
<span class="button button3">Мёд</span>
</div>
Доброго времени суток, возникла трудностьу меня имеется текст в блоке H1
При использовании & - значения применяются только к св-ву flex-direction: column, display игнорирует
Здравствуйте, ,подскажите пожалуйста существуют ли какие-либо виджеты, или гемы - конструкторы HTML страниц-лендингов? Вроде такого https://elementorcom/...
Доброго дняСуть такова, у меня есть container внутри него я хочу расположить на 1 половине (6 колонок) обычный блок, а вот второй блок хочу чтобы...