平武建站

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版】
分享URL：http://pwwzsj.com/article/jpooei.html

其他资讯