Например есть
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button>Вперёд</button>
<button>Назад</button>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНапример есть
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button>Вперёд</button>
<button>Назад</button>
var i = 0;
document.getElementById('forward').onclick = function() {
document.getElementsByTagName("div")[i].classList.remove("active");
if(i == 3) {
i = 0;
} else {
i++;
}
document.getElementsByTagName("div")[i].classList.add("active");
}
document.getElementById('back').onclick = function() {
document.getElementsByTagName("div")[i].classList.remove("active");
if(i == 0) {
i = 3;
} else {
i--
}
document.getElementsByTagName("div")[i].classList.add("active");
}
.active {
background: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button id="forward">Вперёд</button>
<button id="back">Назад</button>
i = 3;
, лучше использовать длину массива, так как количество элементов может быть разное, а править каждый раз код будет не очень хорошо и блоки могут добавляться динамически.
10 апр 2018 в 11:09
let current = 0;
let setNewActive = function(duration) {
let elements = document.getElementById('wrapper').getElementsByTagName('div');
for (let i = 0; i < elements.length; i++) {
if (elements[i].classList.contains('active')) {
current = i;
}
elements[i].removeAttribute("class");
}
if (duration === 'up' && current > 0)
current--;
if (duration === 'down' && current < elements.length - 2)
current++;
elements[current].setAttribute('class', 'active');
}
.active {
color: red;
}
<div id="wrapper">
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>
<button onclick="setNewActive('up')">Вперёд</button>
<button onclick="setNewActive('down')">Назад</button>
На скорую руку
$(document).ready(function () {
$('.next').on('click', function () {
if ($('div.active').index() == -1) {
$('.box div:first-child').addClass('active');
} else {
$('div.active').next('div').addClass('active');
$('div.active').prev('div').removeClass('active');
}
});
$('.prev').on('click', function () {
if ($('div.active').index() == -1) {
/* без действий */
} else {
$('div.active').prev('div').addClass('active');
$('div.active').next('div').removeClass('active');
}
});
});
.active{
background:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button class="prev">Назад</button>
<button class="next">Вперёд</button>
</div>
Такая функция может быть правильно описана несколькими способами :)
Наиболее очевидный способ без лишних усложнений - с использованием свойств элемента previousElementSibling
и nextElementSibling
, которые указывают на соседние элементы того же уровня вложенности.
var current,
first = document.querySelector('#container > div:first-child'),
last = document.querySelector('#container > div:last-child');
var btns = document.getElementsByTagName('button');
for (let btn of btns)
btn.addEventListener('click', onBtnClick);
function onBtnClick(e) {
if (current)
current.classList.remove('active');
switch (e.target.id) {
case 'prev' : current = current ? current.previousElementSibling || last : last; break;
case 'next' : current = current ? current.nextElementSibling || first : first; break;
case 'first': current = first; break;
case 'last' : current = last;
}
current.classList.add('active');
}
body,
button {
font: 16px sans-serif;
}
button { width: 64px; height: 2em; }
#container { display: flex; }
#container > div {
flex: 0 0 50px; height: 50px;
margin: 5px;
background-color: #777; color: #fff;
text-align: center; line-height: 50px;
border: 3px solid #444;
}
#container > div.active { border-color: #d44; }
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<button id="first">⏪</button>
<button id="prev">◀</button>
<button id="next">▶</button>
<button id="last">⏩</button>