js里面怎么使用两个按钮切换四个div的内容？
两个按钮，上一页下一页，我有四个DIV，点击一次显示一个内容其他隐藏，
<form>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</form>
<button>上一页</button>
<button>下一页</button>
一只萌萌小番薯浏览 1312回答 3
3回答
-
茅侃侃
你给没给div添加上id，比如div1,div2,div3,div4，并定义一个隐藏的css类名和相应配置，比如hiden你用一个标志变量来记录当前该展示那一页，比如index，初始为1然后你每次切换（按按钮）就处理index值，然后就可以查询到该显示的div的ID，把其中class属性去除上hiden，把上次没有hiden类的添加上即可。 -
摇曳的蔷薇
看题主的代码，我理解为：题主想做一个通过点击按钮轮番切换 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>
随时随地看视频慕课网APP
相关分类
JavaScript