当前位置: 首页 >wordpress

一个精简的JS DIV层tab切换代码

wordpress 2015-6-26 阅读量: 729 TAG:

DIV层点击切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<title>DIV层点击切换</title>
<script language="JavaScript" type="text/javascript">
function ChangeDiv(divId,divName,zDivCount)
{
for(i=0;i< =zDivCount;i++)
{
document.getElementById(divName+i).style.display="none";
//将所有的层都隐藏
}
document.getElementById(divName+divId).style.display="block";
//显示当前层
}
</script>

<body>
<span onclick="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span>
<span onclick="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span>
<span onclick="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span>
<div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容部分第一区</div>
<div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区</div>
<div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div>
</body>

DIV层滑过切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<title>DIV层切换</title>
</script><script language="JavaScript" type="text/javascript">
function ChangeDiv(divId,divName,zDivCount)
{
for(i=0;i< =zDivCount;i++)
{
document.getElementById(divName+i).style.display="none";
//将所有的层都隐藏
}
document.getElementById(divName+divId).style.display="block";
//显示当前层
}
</script>

<body>
<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span>
<div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容部分第一区</div>
<div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区</div>
<div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div>
</body>

[cc lang=”php”]

 

(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!

相关信息

本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。

如有需要请加QQ: 909912499