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


Posted in Javascript onFebruary 11, 2014

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>
Javascript 相关文章推荐
js中获取事件对象的方法小结
Mar 13 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
微信小程序中为什么使用var that=this
Aug 27 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
js中文逗号转英文实现
Feb 11 #Javascript
JS自调用匿名函数具体实现
Feb 11 #Javascript
js跳转页面方法实现汇总
Feb 11 #Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 #Javascript
JavaScript类属性的访问方式详解
Feb 11 #Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 #Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 #Javascript
You might like
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php创建session的方法实例详解
2015/01/27 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python实现整数的二进制循环移位
2019/03/08 Python
python如何制作缩略图
2019/04/30 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
局域网标准
2016/09/10 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
商务专员岗位职责
2013/11/23 职场文书
会计应聘求职信范文
2013/12/17 职场文书
员工工作表扬信范文
2014/01/13 职场文书
勾股定理课后反思
2014/04/26 职场文书
美容院合作经营协议书
2014/10/10 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python