@Alex_vs_Predator
Начинающий веб-разработчик

Как сделать кнопку активной с помощью jQuery?

Добрый день!
Скажите пожалуйста, как можно сделать кнопку активной с помощью jQuery?
К примеру у меня на слайдере должна быть кнопка активной при нажатии и соответственно при этом должна менять цвет
5af52d661ae74346946038.png

$('.popular_product_slider').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
});

<div class="owl-carousel popular_product_slider owl-theme owl-loaded">
				<div class="owl-stage-outer">
					<div class="owl-stage">
						<div class="owl-item">
							<a href="#">
								<div class="block_product">
									<div class="head_product">
										<span>акция</span>
										<div class="star"></div>
									</div>
									<img src="images/product.png" alt="">
									<a href="#" class="link_speed">Быстрый просмотр</a>
									<div class="desk_product">
										<p class="pro">PRM-Pro</p>
										<p class="petkit">Petkit</p>
									</div>
									<p class="text_product">
										Интерактивная веб-камера
										MATE, без рисунка
									</p>
									<div class="wrap_count_product">
										<div class="count_product">
											<p class="retail">розница</p>
											<p class="number">5 640 руб.</p>
										</div>
										<div class="count_product">
											<p class="retail">оптом</p>
											<p class="number2">5 561 руб.</p>
										</div>
									</div>
									<div class="wrap_num_basket">
										<div class="click_number">
											<div class="minus">-</div>
											<div class="counter">10</div>
											<div class="plus">+</div>
										</div>
										<button>В корзину</button>
									</div>
									<strong>Уже в  корзине</strong>
								</div>
							</a>
						</div>
						<div class="owl-item">
							<a href="#">
								<div class="block_product">
									<div class="head_product">
										<span class="xit">хит</span>
										<div class="star"></div>
									</div>
									<img src="images/product.png" alt="">
									<a href="#" class="link_speed">Быстрый просмотр</a>
									<div class="desk_product">
										<p class="pro">PRM-Pro</p>
										<p class="petkit">Petkit</p>
									</div>
									<p class="text_product">
										Интерактивная веб-камера
										MATE, без рисунка
									</p>
									<div class="wrap_count_product">
										<div class="count_product">
											<p class="retail">розница</p>
											<p class="number">5 640 руб.</p>
										</div>
										<div class="count_product">
											<p class="retail">оптом</p>
											<p class="number2">5 561 руб.</p>
										</div>
									</div>
									<div class="wrap_num_basket">
										<div class="click_number">
											<div class="minus">-</div>
											<div class="counter">10</div>
											<div class="plus">+</div>
										</div>
										<button>В корзину</button>
									</div>
									<strong>Уже в  корзине</strong>
								</div>
							</a>
						</div>
						<div class="owl-item">
							<a href="#">
								<div class="block_product">
									<div class="head_product">
										<span>акция</span>
										<div class="star"></div>
									</div>
									<img src="images/product.png" alt="">
									<a href="#" class="link_speed">Быстрый просмотр</a>
									<div class="desk_product">
										<p class="pro">PRM-Pro</p>
										<p class="petkit">Petkit</p>
									</div>
									<p class="text_product">
										Интерактивная веб-камера
										MATE, без рисунка
									</p>
									<div class="wrap_count_product">
										<div class="count_product">
											<p class="retail">розница</p>
											<p class="number">5 640 руб.</p>
										</div>
										<div class="count_product">
											<p class="retail">оптом</p>
											<p class="number2">5 561 руб.</p>
										</div>
									</div>
									<div class="wrap_num_basket">
										<div class="click_number">
											<div class="minus">-</div>
											<div class="counter">10</div>
											<div class="plus">+</div>
										</div>
										<button>В корзину</button>
									</div>
									<strong>Уже в  корзине</strong>
								</div>
							</a>
						</div>
						<div class="owl-item">
							<a href="#">
								<div class="block_product">
									<div class="head_product">
										<span class="novelty">новинка</span>
										<div class="star"></div>
									</div>
									<img src="images/product.png" alt="">
									<a href="#" class="link_speed">Быстрый просмотр</a>
									<div class="desk_product">
										<p class="pro">PRM-Pro</p>
										<p class="petkit">Petkit</p>
									</div>
									<p class="text_product">
										Интерактивная веб-камера
										MATE, без рисунка
									</p>
									<div class="wrap_count_product">
										<div class="count_product">
											<p class="retail">розница</p>
											<p class="number_price">5 640 руб.</p>
											<p class="old_price">7 640 руб.</p>
										</div>
										<div class="count_product">
											<p class="retail">оптом</p>
											<p class="number2_price">5 561 руб.</p>
											<p class="old_price">7 640 руб.</p>
										</div>
									</div>
									<div class="wrap_num_basket">
										<div class="click_number">
											<div class="minus">-</div>
											<div class="counter">10</div>
											<div class="plus">+</div>
										</div>
										<button>В корзину</button>
									</div>
									<strong>Уже в  корзине</strong>
								</div>
							</a>
						</div>
						<div class="owl-item">
							<a href="#">
								<div class="block_product">
									<div class="head_product">
										<span>акция</span>
										<div class="star"></div>
									</div>
									<img src="images/product.png" alt="">
									<a href="#" class="link_speed">Быстрый просмотр</a>
									<div class="desk_product">
										<p class="pro">PRM-Pro</p>
										<p class="petkit">Petkit</p>
									</div>
									<p class="text_product">
										Интерактивная веб-камера
										MATE, без рисунка
									</p>
									<div class="wrap_count_product">
										<div class="count_product">
											<p class="retail">розница</p>
											<p class="number">5 640 руб.</p>
										</div>
										<div class="count_product">
											<p class="retail">оптом</p>
											<p class="number2">5 561 руб.</p>
										</div>
									</div>
									<div class="wrap_num_basket">
										<div class="click_number">
											<div class="minus">-</div>
											<div class="counter">10</div>
											<div class="plus">+</div>
										</div>
										<button>В корзину</button>
									</div>
									<strong>Уже в  корзине</strong>
								</div>
							</a>
						</div>
						<div class="owl-item">
							<a href="#">
								<div class="block_product">
									<div class="head_product">
										<span class="xit">хит</span>
										<div class="star"></div>
									</div>
									<img src="images/product.png" alt="">
									<a href="#" class="link_speed">Быстрый просмотр</a>
									<div class="desk_product">
										<p class="pro">PRM-Pro</p>
										<p class="petkit">Petkit</p>
									</div>
									<p class="text_product">
										Интерактивная веб-камера
										MATE, без рисунка
									</p>
									<div class="wrap_count_product">
										<div class="count_product">
											<p class="retail">розница</p>
											<p class="number">5 640 руб.</p>
										</div>
										<div class="count_product">
											<p class="retail">оптом</p>
											<p class="number2">5 561 руб.</p>
										</div>
									</div>
									<div class="wrap_num_basket">
										<div class="click_number">
											<div class="minus">-</div>
											<div class="counter">10</div>
											<div class="plus">+</div>
										</div>
										<button>В корзину</button>
									</div>
									<strong>Уже в  корзине</strong>
								</div>
							</a>
						</div>
					</div>
				</div>
				<div class="owl-dots">
					<div class="owl-dot active"><span></span></div>
					<div class="owl-dot"><span></span></div>
					<div class="owl-dot"><span></span></div>
				</div>
			</div>


.popular_product_slider .owl-loaded {
	max-height: 435px;
}
.popular_product_slider .owl-stage-outer {
	max-height: 435px;
}
.popular_product_slider.owl-drag .owl-item {
	margin-left: 1px !important;
	margin-top: 7px !important;
}
.popular_product_slider .owl-dots.disabled {
	display: block;
	width: 40px;
	height: 40px;
	background-color: #cce2e3;
}
.popular_product_slider .owl-nav {
	position: absolute;
	top: -90px;
	right: 0;
}
.popular_product_slider .owl-nav button.owl-next {
	background-color: #cce2e3;
	color: #fff;
	outline: none;
}
.popular_product_slider .owl-nav button.owl-prev {
	background-color: #cce2e3;
	color: #fff;
	outline: none;
	margin-right: 5px;
}
.popular_product_slider .owl-next, .popular_product_slider .owl-prev {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}
.popular_product_slider .owl-nav button.owl-next:hover,
.popular_product_slider .owl-nav button.owl-prev:hover {
	background-color: #008687;
}
  • Вопрос задан
  • 125 просмотров
Решения вопроса 1
weranda
@weranda
Зачем тут jQuery? :hover & :focus уже отменили?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы