手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现div的切换特效上一个下一个
js实现div的切换特效上一个下一个
摘要:JS部分:复制代码代码如下://下一个divfunctionnext(){vararr=document.getElementById('t...

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">

2

</div>

<div id="div3">

3

</div>

</td>

<td>

<input type="button" value="上一步" id="syb" name="cz2" disabled="true"/></br></br>

<input type="button" value="下一步" id="xyb" name="cz3"/></br></br>

</td>

</tr>

</table>

【js实现div的切换特效上一个下一个】相关文章:

js操作css属性实现div层展开关闭效果的方法

jQuery插件expander实现图片翻转特效

jQuery实现文本展开收缩特效

js+html5实现canvas绘制简单矩形的方法

javascript实现树形菜单的方法

javascript实现淡蓝色的鼠标拖动选择框实例

js实现div层缓慢收缩与展开的方法

javascript实现模拟时钟的方法

Jquery实现动态切换图片的方法

jQuery插件zepto.js简单实现tab切换

精品推荐
分类导航