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

前端技术 2023/09/09 JavaScript
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>

本文地址：https://www.stayed.cn/item/24219

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案