本文实例讲述了Javascript表格隔行变色和Tab标签页特效。分享给大家供大家参考，具体如下：
最近一直在看Javascript知识，偶尔也穿插一点Jquery，感觉Jquery用起来真爽，减少了很多的代码量，而且学习也不是很高。接下来给大家分享两个小的特效，表格隔行变色和Tab标签页，大家来体会一下。
表格隔行变色
效果图：
原生Js实现代码：
原生js表格隔行变色 #table{ width:500px; border:1px solid red; border-collapse: collapse; } #table td{ border:1px solid red; }
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表格隔行变色 #table{ width:500px; border:1px solid red; border-collapse: collapse; } #table td{ border:1px solid red; }
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标签页 *{ margin:0; padding:0; } #nav{ list-style-type: none; height:30px; margin-bottom: 10px; } #nav li{ height:30px; line-height: 30px; float:left; padding:0 15px; border:1px solid blue; margin-right: 3px; } #content{ width:300px; height:200px; border:1px solid blue; } #content div{ display: none; } body{ padding:40px; } #nav li.current{ background: red; } #content div.show{ display: block; } php.........介绍 ruby.........介绍 python.........介绍
实现的思路也比较简单，首先给第一个li标签添加背景，然后让对应的div标签显示出来，让其余的div隐藏。然后每次点击一个li标签就把当前的li标签添加上背景，让其余的所有li标签移除背景色，最后把相应的div标签显示出来就可以了。
jquery实现代码：
jquery实现tab标签页 *{ margin:0; padding:0; } #nav{ list-style-type: none; height:30px; margin-bottom: 10px; } #nav li{ height:30px; line-height: 30px; float:left; padding:0 15px; border:1px solid blue; margin-right: 3px; } #content{ width:300px; height:200px; border:1px solid blue; } #content div{ display: none; } body{ padding:40px; } #nav li.current{ background: red; } #content div.show{ display: block; } php.........介绍 ruby.........介绍 python.........介绍
思路和上面的一样，看看代码，只有2行，这就是Jquery的神奇之处。
感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于Javascript相关内容可查看本站专题：《Javascript操作DOM技巧总结》、《Javascript页面元素操作技巧总结》、《Javascript事件相关操作与技巧大全》、《Javascript查找算法技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript错误与调试技巧总结》
希望本文所述对大家Javascript程序设计有所帮助。
