重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考，具体如下：
成都创新互联公司主要从事网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务四子王,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
最近一直在看JavaScript知识，偶尔也穿插一点Jquery，感觉Jquery用起来真爽，减少了很多的代码量，而且学习也不是很高。接下来给大家分享两个小的特效，表格隔行变色和Tab标签页，大家来体会一下。
表格隔行变色
效果图：
原生Js实现代码：
原生js表格隔行变色
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
实现的思路比较简单，首先获取页面中的tr对象，然后遍历所有对象，分析是单行还是双行，给不同的行添加颜色。
Jquery实现代码：
jquery表格隔行变色
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
| 11111 | 22222 | 33333 | 44444 |
| aaaaa | bbbbb | ccccc | ddddd |
大家看到没，Jquery只用到了一句话，就完成了工作。
Tab标签页
效果图
原生Js实现代码：
原生js实现tab标签页
php.........介绍
ruby.........介绍
python.........介绍
实现的思路也比较简单，首先给第一个li标签添加背景，然后让对应的div标签显示出来，让其余的div隐藏。然后每次点击一个li标签就把当前的li标签添加上背景，让其余的所有li标签移除背景色，最后把相应的div标签显示出来就可以了。
jquery实现代码：
jquery实现tab标签页
php.........介绍
ruby.........介绍
python.........介绍
思路和上面的一样，看看代码，只有2行，这就是Jquery的神奇之处。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
当前文章：JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
当前URL：http://cqcxhl.com/article/jpooei.html