您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 实现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>