十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本文实例讲述了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标签页
实现的思路也比较简单,首先给第一个li标签添加背景,然后让对应的div标签显示出来,让其余的div隐藏。然后每次点击一个li标签就把当前的li标签添加上背景,让其余的所有li标签移除背景色,最后把相应的div标签显示出来就可以了。
jquery实现代码:
jquery实现tab标签页
思路和上面的一样,看看代码,只有2行,这就是Jquery的神奇之处。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。