您的位置：首页 > Web前端 > JavaScript

js实现div的切换特效上一个下一个

2018-10-12 14:04 513 查看

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>

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航