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

221 阅读 0 评论 146 点赞

我是靠谱客的博主任性乌龟，最近开发中收集的这篇文章主要介绍js实现div的切换特效上一个下一个，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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> 