两个按钮，上一页下一页，我有四个DIV，点击一次显示一个内容其他隐藏，<form><div>1</div><div>2</div><div>3</div><div>4</div></form><button>上一页</button><button>下一页</button>
3 回答
茅侃侃
TA贡献1842条经验 获得超21个赞
你给没给div添加上id，比如div1,div2,div3,div4，并定义一个隐藏的css类名和相应配置，比如hiden
你用一个标志变量来记录当前该展示那一页，比如index，初始为1
然后你每次切换（按按钮）就处理index值，然后就可以查询到该显示的div的ID，把其中class属性去除上hiden，把上次没有hiden类的添加上即可。
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
看题主的代码，我理解为：题主想做一个通过点击按钮轮番切换 div 的功能。以下为实现代码，纯 js DOM 操作，没有使用 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()">上一页</button>
<button onclick="next()">下一页</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>
添加回答
举报
0/150
提交
取消