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

点评：实现p切换的方法有很多，下面为大家介绍下使用js是如何实现的，感兴趣的朋友可以看下！

JS部分： 

复制代码 代码如下:

//下一个p 

function next() { 

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

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

} 

} 

} 

//上一个p 

function top() { 

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

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

<p id="p1"> 

1 

</p> 

<p id="p2" style="display: none"> 

2 

</p> 

<p id="p3" style="display: none"> 

3 

</p> 

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