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

本文实例讲述了Java脚本语言表格隔行变色和标签标签页特效。分享给大家供大家参考，具体如下：

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

表格隔行变色

效果图：

原生射流研究…实现代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题原生射流研究…表格隔行变色/title style # table { width :500 px；border:1px纯红；边界崩溃：崩溃；} #table td{ border:1px纯红；}/样式脚本窗户。onload=function(){ var tr=document。getelementsbytagname(' tr ')；for(var I=0；itr.lengthI){ if(I % 2==0){ tr[I]。风格。背景='蓝色'；}else{ tr[i].style.background='黄色；} } }/脚本/头体表id=' table ' tr TD 11111/TD TD TD 22222/TD TD TD 33333/TD TD TD 4444/TD/tr TD AAAA/TD tdbbbbbbb/TD tdcccccc/TD tddddd/TD/tr TD 11111/TD TD TD TD TD 22222/TD TD TD TD TD 33333/TD TD TD 4444/TD/tr tdaaaa/TD tdbbbbbbb/TD实现的思路比较简单，首先获取页面中的tr对象，然后遍历所有对象，分析是单行还是双行，给不同的行添加颜色。

框架实现代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title jquery表格隔行变色/title style # table { width :500 px；border:1px纯红；边界崩溃：崩溃；} #table td{ border:1px纯红；}/style脚本src=' http : jquery。js '/script script $(function(){/$(' table tr : even ')).css(“”背景','蓝色');//$(“表tr :奇数”).css(“”背景','黄色');$("表tr ").过滤器(' :偶数')。css(“”背景','蓝色')。end().过滤器(' :奇数')。css(“”背景','黄色');});/script/head dy table id=' table ' tr TD 11111/TD TD TD TD 22222/TD TD TD 33333/TD TD TD 4444/TD/tr TD AAA/TD tdbbbbb/TD tdcccccc/TD tddddd/TD/tr TD 1111/TD TD TD TD TD TD 22222/TD TD TD TD 33333/TD TD TD TD 4444/TD/tr TD tr TD tdaaaa/TD tdbbbbbbbbb大家看到没，Jquery只用到了一句话，就完成了工作。

标签标签页

效果图

原生射流研究…实现代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题原生射流研究…实现标签标签页/title style * { margin 33600；划水：0;} # nav { list-style-type : none；高度：30 px边距-底部： 10px} #导航li { height:30px线高： 30pxfloat : leftadding :0 15pxborder :1 px纯蓝；右边距： 3px} #内容{宽度：300像素高度：200 pxborder:1px纯蓝；} #内容分区{ display: none}正文{ padding:40px } #导航Li。当前{背景：红色；} #内容分区。show { display :块；}/style/head body ul id=' nav ' Li class=' current ' PHP/Li Li ruby/李丽丽/ul div id=' content ' div class=' show ' PHP..介绍/div divruby..介绍divpython..介绍/div/div/正文脚本var ul=文档。getelementbyid(' nav ')；var Li=ul。getelementsbytagname(' Li ')；//获取里标签var内容=文档。getelementbyid(' content ')；var div=内容。getelementsbytagname(' div ')；//获取差异标签//循环所有的里对象for(var I=0；伊犁长度；i ){ li[i].索引=我；//把循环遍历保存到当前的里对象中//给每个里对象添加点击事件李[我]。onclick=function(){ //再次循环所有的里对象for(var j=0；jli.lengthj ){ li[j].className=//给里对象取消班级属性div[j]。风格。display=" none//给差异属性隐藏} this.className=' current//给当前点击的里添加班级属性这个。索引]。风格。display=' block//将对应的差异对象显示出来} }/脚本/html实现的思路也比较简单，首先给第一个里标签添加背景，然后让对应的差异标签显示出来，让其余的差异隐藏。然后每次点击一个里标签就把当前的里标签添加上背景，让其余的所有里标签移除背景色，最后把相应的差异标签显示出来就可以了。

框架实现代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title jquery实现标签标签页/title脚本src=' http : jquery。js '/脚本样式* { margin 33600划水：0;} # nav { list-style-type : none；高度：30 px边距-底部： 10px} #导航li { height:30px线高： 30pxfloat : leftadding :0 15pxborder :1 px纯蓝；右边距： 3px} #内容{宽度：300像素高度：200 pxborder:1px纯蓝；} #内容分区{ display: none}正文{ padding:40px } #导航Li。当前{背景：红色；} #内容分区。show { display :块；}/style/head body ul id=' nav ' Li class=' current ' PHP/Li Li ruby/李丽丽/ul div id=' content ' div class=' show ' PHP..介绍/div divruby..介绍divpython..介绍/div/div/body脚本$(function(){ $(' # nav Li ')).单击(function(){ $(this)).addClass('current ').兄弟姐妹()。removeClass(“”当前');$('#contentdiv ').eq($(this)).index()).显示()。兄弟姐妹()。hide()；});})/脚本/html思路和上面的一样，看看代码，只有2行，这就是框架的神奇之处。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于Java脚本语言相关内容可查看本站专题： 《JavaScript操作DOM技巧总结》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript事件相关操作与技巧大全》 、 《JavaScript查找算法技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。