快捷導(dǎo)航

js實(shí)現(xiàn)div的切換特效上一個(gè)下一個(gè)

更新時(shí)間：2014年02月11日 15:08:28 作者：

實(shí)現(xiàn)div切換的方法有很多，下面為大家介紹下使用js是如何實(shí)現(xiàn)的

JS部分：

 
//下一個(gè)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"; 
} 
} 
} 
//上一個(gè)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部分：

復(fù)制代碼代碼如下:

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

您可能感興趣的文章:

切換div

相關(guān)文章

php類(lèi)中static與self的使用區(qū)別淺析
在閱讀一些框架的源碼時(shí)發(fā)現(xiàn)了new static(),和new self(),甚是不解,后來(lái)查閱資料,才了解了,所以下面這篇文章主要給大家介紹了關(guān)于php類(lèi)中static與self的使用區(qū)別的相關(guān)資料,需要的朋友可以參考下
2021-06-06
js控制元素顯示在屏幕固定位置及監(jiān)聽(tīng)屏幕高度變化的方法
這篇文章主要介紹了js控制元素顯示在屏幕固定位置及監(jiān)聽(tīng)屏幕高度變化的方法,涉及javascript針對(duì)頁(yè)面元素及樣式屬性的相關(guān)操作技巧,需要的朋友可以參考下
2015-08-08
原生Js實(shí)現(xiàn)簡(jiǎn)易煙花爆炸效果的方法
這篇文章主要介紹了原生Js實(shí)現(xiàn)簡(jiǎn)易煙花爆炸效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)煙花爆炸效果的原理與具體實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
js操作iframe的一些方法介紹
本篇文章介紹了js操作iframe的一些方法的實(shí)例代碼與步驟，有需要的朋友可以參考一下
2013-06-06
js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法,實(shí)例分析了javascript處理鼠標(biāo)事件及文字特效的技巧,需要的朋友可以參考下
2015-02-02
網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)代碼收集
網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)代碼收集
2009-09-09
從parcel.js打包出錯(cuò)到選擇nvm的全部過(guò)程
這篇文章主要介紹了從parcel.js打包出錯(cuò)到選擇nvm的全部過(guò)程，需要的朋友可以參考下
2018-01-01
利用JavaScript的%做隔行換色的實(shí)例
下面小編就為大家分享一篇利用JavaScript的%做隔行換色的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
js怎么只刷新當(dāng)前頁(yè)面一次
Javascript刷新頁(yè)面的幾種方法：location.reload()、location.replace(location)、history.go(0)、location=location、location.assign(location)、document.execCommand('Refresh')、window.navigate(location)、document.URL=location.href,js怎么只刷新當(dāng)前頁(yè)面一次呢
2023-09-09
圖文詳解Javascript中的上下文和作用域
這篇文章通過(guò)圖文詳細(xì)的給大家介紹了關(guān)于Javascript中的上下文與作用域背后的機(jī)制，主要涉及到執(zhí)行上下文（execution context）、作用域鏈（scope chain）、閉包（closure）、this等概念。需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-02-02