TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超22個(gè)贊
你給沒(méi)給div添加上id，比如div1,div2,div3,div4，并定義一個(gè)隱藏的css類(lèi)名和相應(yīng)配置，比如hiden
你用一個(gè)標(biāo)志變量來(lái)記錄當(dāng)前該展示那一頁(yè)，比如index，初始為1
然后你每次切換（按按鈕）就處理index值，然后就可以查詢(xún)到該顯示的div的ID，把其中class屬性去除上hiden，把上次沒(méi)有hiden類(lèi)的添加上即可。
TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
看題主的代碼，我理解為：題主想做一個(gè)通過(guò)點(diǎn)擊按鈕輪番切換 div 的功能。以下為實(shí)現(xiàn)代碼，純 js DOM 操作，沒(méi)有使用 JQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 100px;
width: 100px;
float: left;
display: none;
}
div:nth-child(1) {
background-color:chocolate;
}
div:nth-child(2) {
background-color:darkgoldenrod;
}
div:nth-child(3) {
background-color:darkmagenta;
}
.active {
display: block;
}
</style>
</head>
<body>
<form id="box">
<div class="active">1</div>
<div>2</div>
<div>3</div>
</form>
<button onclick="pre()">上一頁(yè)</button>
<button onclick="next()">下一頁(yè)</button>
<script>
function next() {
let divEl = document.getElementsByClassName('active')[0],
nextEl = divEl.nextElementSibling;
divEl.className = '';
if (nextEl) {
nextEl.className = 'active';
} else {
document.getElementById('box').firstElementChild.className = 'active';
}
}
function pre() {
let divEl = document.getElementsByClassName('active')[0],
preEl = divEl.previousElementSibling;
divEl.className = '';
if (preEl) {
preEl.className = 'active';
} else {
document.getElementById('box').lastElementChild.className = 'active';
}
}
</script>
</body>
</html>
舉報(bào)