js實現div的切換特效上一個下一個

 實現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>