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部分:
<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ù)制代碼 代碼如下:
//下一個(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>
您可能感興趣的文章:
- jquery的父子兄弟節(jié)點(diǎn)查找示例代碼
- Ajax中通過JS代碼自動(dòng)獲取表單元素值的示例代碼
- JS 使用for循環(huán)遍歷子節(jié)點(diǎn)查找元素
- js獲取元素相對(duì)窗口位置的實(shí)現(xiàn)代碼
- 通過JS動(dòng)態(tài)創(chuàng)建一個(gè)html DOM元素并顯示
- js實(shí)現(xiàn)從數(shù)組里隨機(jī)獲取元素
- js獲取json元素?cái)?shù)量的方法
- js獲取數(shù)組的最后一個(gè)元素
- js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素
相關(guān)文章
JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法
這篇文章主要介紹了JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法,需要的朋友可以參考下2017-07-07如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果
我將用最通俗的語言和最簡潔的代碼給大家演示如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果2013-09-09JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04javascript中全局對(duì)象的isNaN()方法使用介紹
全局對(duì)象的isNaN()方法通常用于檢測(cè) parseFloat() 和 parseInt() 的結(jié)果,下面為大家介紹下其具體的使用,感興趣的朋友可以參考下2013-12-12