js实现div的切换特效上一个下一个
更新时间：2014年02月11日 15:08:28 作者：
实现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>
复制代码 代码如下:
//下一个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>
相关文章
在阅读一些框架的源码时发现了new static(),和new self(),甚是不解,后来查阅资料,才了解了,所以下面这篇文章主要给大家介绍了关于php类中static与self的使用区别的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法,涉及javascript针对页面元素及样式属性的相关操作技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了原生Js实现简易烟花爆炸效果的方法,实例分析了javascript实现烟花爆炸效果的原理与具体实现方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本篇文章介绍了js操作iframe的一些方法的实例代码与步骤，有需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了js实现文字跟随鼠标移动而移动的方法,实例分析了javascript处理鼠标事件及文字特效的技巧,需要的朋友可以参考下2015-02-02
网页自动跳转代码收集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怎么只刷新当前页面一次呢2023-09-09
这篇文章通过图文详细的给大家介绍了关于Javascript中的上下文与作用域背后的机制，主要涉及到执行上下文（execution context）、作用域链（scope chain）、闭包（closure）、this等概念。需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
最新评论