非常精简的JS DIV层tab切换代码

发表时间：2010-03-30关注度：803 views 评论数：0

下面的代码是比较精简的js tab切换代码，原理也比较简单。去掉了繁琐的外壳，这样自己要用的时候是不是更方便呢？ [runcode height="300"] DIV层切换|时代前端 function ChangeDiv(divId,divName,zDivCount) { for(i=0;i

下面的代码是比较精简的js tab切换代码，原理也比较简单。
去掉了繁琐的外壳，这样自己要用的时候是不是更方便呢？

<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> </head> <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> </p> <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>

提示：你可以先修改部分代码再运行。

转载请注明文章转载自：网站前端,web前端,前端脚本,前端优化|时代前端 [http://www.52shidai.com]
本文链接地址：非常精简的JS DIV层tab切换代码

上一篇: javascript中的107个基础知识收集整理

下一篇:利用301重定向改变WordPress永久链接Permalinks Migration

随机日志推荐

发表评论

最热文章
- 100个最漂亮|免费的wordpress模板 - 3,072 views
- 漂亮的javascript对话框(弹出层)组件[附源码] - 2,272 views
- wordpress采集插件—wp-o-matic使用详解 - 1,981 views
- 开启wordpress 3.0多用户的方法 - 1,781 views
- 12个用jQuery插件改变Button按钮的漂亮特效 - 1,765 views
- 国人原创的WordPress杂志主题wp-cms - 1,650 views
- jQuery-bind不能处理绑定hover事件 - 1,615 views
- 封装好的javascript图片滑动效果 - 1,571 views
- 推荐5个漂亮的jquery主流图表插件 - 1,557 views
- 文字向上不间断滚动代码-兼容各浏览器 - 1,362 views
最新文章
热门标签

canvas google html HTML5 JavaScript jQuery SEO wordpress 主题优化关键字兼容函数前端优化博客友情链接图片外链工具常用性能技巧排名推广插件搜索搜索引擎收录教程文章方法时间权重模板滚动漂亮特性百度经典网站菜单谷歌遍历链接鼠标滚轮

网站前端,web前端,前端脚本,前端优化|时代前端