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" οnclick="javascript:top()" disabled="true"/></br></br>
             <input type="button" value="下一步" id="xyb" name="cz3" οnclick="javascript:next()"/></br></br>

        </td>

     </tr>

</table>