Как добавлять активный класс к элементам по клику на кнопки nav-prev
и nav-next
? Проблема с моим скриптом такова: Если активный первый элемент и нажать на кнопку nav-prev
,то класс пропадет и также с последним элементом, если он активный и нажать на nav-next
,то активный класс пропадет.
Как можно это исправить?
$(".nav-prev").click(function() {
$(".elem.active").removeClass("active").prev().addClass("active");
});
$(".nav-next").click(function() {
$(".elem.active").removeClass("active").next().addClass("active");
});
.wrapper {
display: flex;
}
.elem {
width: 100px;
height: 100px;
background: yellow;
margin-right: 10px;
}
.elem.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="elem">1</div>
<div class="elem">2</div>
<div class="elem active">3</div>
<div class="elem">4</div>
<div class="elem">5</div>
</div>
<button class="nav-prev">prev</button>
<button class="nav-next">next</button>