DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js實現div的切換特效上一個下一個
js實現div的切換特效上一個下一個
編輯:JavaScript綜合知識     

 實現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> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved