JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考,具体如下:

成都创新互联公司主要从事网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务四子王,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了很多的代码量,而且学习也不是很高。接下来给大家分享两个小的特效,表格隔行变色和Tab标签页,大家来体会一下。

表格隔行变色

效果图:

JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

原生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标签页

效果图

JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

原生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版】
文章网址:http://bzwzjz.com/article/jpooei.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设 品牌网站建设 成都营销网站建设 成都网站设计 手机网站设计 四川成都网站制作 成都定制网站建设 成都网站建设 营销网站建设 网站制作 成都网站建设公司 成都网站建设公司 营销型网站建设 高端网站建设 营销网站建设 成都网站设计 响应式网站建设 上市集团网站建设 成都网站建设 企业手机网站建设 H5网站制作 成都网站制作