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