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

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

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

表格隔行变色

效果图:

JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】_第1张图片

原生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版】_第2张图片

原生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版】)