js实现div的切换特效上一个下一个_Javascript教程-查字典教程网
js实现div的切换特效上一个下一个
js实现div的切换特效上一个下一个
发布时间:2016-12-30 来源:查字典编辑
摘要:JS部分:复制代码代码如下://下一个divfunctionnext(){vararr=document.getElementById('t...

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">

2

</div>

<div id="div3">

3

</div>

</td>

<td>

<input type="button" value="上一步" id="syb" name="cz2" disabled="true"/></br></br>

<input type="button" value="下一步" id="xyb" name="cz3"/></br></br>

</td>

</tr>

</table>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类