展会信息港展会大全

js实现div的切换特效上一个下一个
来源:互联网   发布日期:2016-03-24 20:10:32   浏览:2026次  

导读:实现div切换的方法有很多,下面为大家介绍下使用js是如何实现的JS部分:代码如下://下一个divfunction next() {var arr = document.ge...

实现div切换的方法有很多,下面为大家介绍下使用js是如何实现的

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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港