js实施div的切换特效上一个下一个

发布时间：2023-10-07 15:07:43 所属栏目：教程来源：

导读：JS部分：

代码如下:

//下一个div

function next() {

var arr = document.getElementById('tdBjzbsx').getElementsByTagName('div');

for (i = 0; i < arr.length-1; i++) {

JS部分：

代码如下:

//下一个div

function next() {

var arr = document.getElementById('tdBjzbsx').getElementsByTagName('div');

for (i = 0; i < arr.length-1; i++) {

if ((arr[i].style.display == "block"||arr[i].style.display == "") && i <= 2) {

arr[i + 1].style.display = "block";

arr[i].style.display = "none";

}

}

}

//上一个div

function top() {

var arr = document.getElementById('tdBjzbsx').getElementsByTagName('div');

for (i = 0; i < arr.length; i++) {

if ((arr[i].style.display == "block"||arr[i].style.display == "") && i <= 3) {

arr[i - 1].style.display = "block";

arr[i].style.display = "none";

break;

}

}

}

JSP部分：

代码如下:

<table>

<tr>

<td id="tdBjzbsx">

<div id="div1">

1

</div>

<div id="div2" style="display: none">

2

</div>

<div id="div3" style="display: none">

3

</div>

</td>

<td>

<input type="button" value="上一步" id="syb" name="cz2" onclick="javascript:top()" disabled="true"/></br></br>

<input type="button" value="下一步" id="xyb" name="cz3" onclick="javascript:next()"/></br></br>

</td>

</tr>

</table>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!