<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="items">
<div class="item active">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="count">1</div>
<div class="btn">Next</div>
</body>
</html>.item {
display: none;
}
.item.active {
display: block;
}let btn = document.querySelector('.btn');
let item = document.querySelectorAll('.item');
function nextPage() {
for (let i = 0, length = item.length; i < length; i++) {
item[i].classList.add('active');
}
}
btn.addEventListener('click', nextPage);let btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
let item,
item_active = document.querySelector('.item.active').nextElementSibling;
while (item_active) {
if (item_active.classList.contains('item')) {
item = item_active;
break;
}
}
document.querySelectorAll('.item').forEach(function(tab) {
tab.classList.remove('active');
});
if (item != undefined) {
item.classList.add('active');
} else {
document.querySelector('.item').classList.add('active');
}
});let btn = document.querySelector('.btn');
let item = document.querySelectorAll('.item');
let el_active;
function nextPage() {
for (let i = 0, length = item.length; i < length; i++) {
if (item[i].classList.contains('active')) {
el_active = i;
break;
}
}
item.forEach(function(tab) {
tab.classList.remove('active');
});
if ( (el_active+1) === item.length) {
item[0].classList.add('active')
} else {
item[el_active + 1].classList.add('active')
}
}
btn.addEventListener('click', nextPage);