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+html+css实现鼠标移动div实例
Jan 30 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
世界上第一台立体声收音机
2021/03/01 无线电
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python中为什么要用self探讨
2015/04/14 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python实现完整的事务操作示例
2017/06/20 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
小学美术教学反思
2014/02/01 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
大学军训决心书
2015/02/05 职场文书
2015选调生工作总结
2015/07/24 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python