汉滨区城乡建设规划局 网站,四川设计院排名,wordpress负载均衡上传附件,冯宗耀seo教程本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考#xff0c;具体如下#xff1a;最近一直在看JavaScript知识#xff0c;偶尔也穿插一点Jquery#xff0c;感觉Jquery用起来真爽#xff0c;减少了很多的代码量#xff0c;而且学习也不是很高。…本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考具体如下最近一直在看JavaScript知识偶尔也穿插一点Jquery感觉Jquery用起来真爽减少了很多的代码量而且学习也不是很高。接下来给大家分享两个小的特效表格隔行变色和Tab标签页大家来体会一下。表格隔行变色效果图原生Js实现代码原生js表格隔行变色#table{width:500px;border:1px solid red;border-collapse: collapse;}#table td{border:1px solid red;}window.onload function(){var tr document.getElementsByTagName(tr);for(var i0;iif(i % 2 0){tr[i].style.background blue;}else{tr[i].style.background yellow;}}}11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd实现的思路比较简单首先获取页面中的tr对象然后遍历所有对象分析是单行还是双行给不同的行添加颜色。Jquery实现代码jquery表格隔行变色#table{width:500px;border:1px solid red;border-collapse: collapse;}#table td{border:1px solid red;}$(function(){// $(table tr:even).css(background,blue);// $(table tr:odd).css(background,yellow);$(table tr).filter(:even).css(background,blue).end().filter(:odd).css(background,yellow);});11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd11111222223333344444aaaaabbbbbcccccddddd大家看到没Jquery只用到了一句话就完成了工作。Tab标签页效果图原生Js实现代码原生js实现tab标签页*{margin:0;padding:0;}#nav{list-style-type: none;height:30px;margin-bottom: 10px;}#nav li{height:30px;line-height: 30px;float:left;padding:0 15px;border:1px solid blue;margin-right: 3px;}#content{width:300px;height:200px;border:1px solid blue;}#content div{display: none;}body{padding:40px;}#nav li.current{background: red;}#content div.show{display: block;}phprubypythonphp.........介绍ruby.........介绍python.........介绍var ul document.getElementById(nav);var li ul.getElementsByTagName(li);//获取li标签var content document.getElementById(content);var div content.getElementsByTagName(div);//获取div标签//循环所有的li对象for(var i0;ili[i].index i;//把循环遍历保存到当前的li对象中//给每个li对象添加点击事件li[i].onclick function(){//再次循环所有的li对象for(var j0;jli[j].className ;//给li对象取消class属性div[j].style.display none;//给div属性隐藏}this.className current;//给当前点击的li添加class属性div[this.index].style.display block;//将对应的div对象显示出来}}实现的思路也比较简单首先给第一个li标签添加背景然后让对应的div标签显示出来让其余的div隐藏。然后每次点击一个li标签就把当前的li标签添加上背景让其余的所有li标签移除背景色最后把相应的div标签显示出来就可以了。jquery实现代码jquery实现tab标签页*{margin:0;padding:0;}#nav{list-style-type: none;height:30px;margin-bottom: 10px;}#nav li{height:30px;line-height: 30px;float:left;padding:0 15px;border:1px solid blue;margin-right: 3px;}#content{width:300px;height:200px;border:1px solid blue;}#content div{display: none;}body{padding:40px;}#nav li.current{background: red;}#content div.show{display: block;}phprubypythonphp.........介绍ruby.........介绍python.........介绍$(function(){$(#navli).click(function(){$(this).addClass(current).siblings().removeClass(current);$(#contentdiv).eq($(this).index()).show().siblings().hide();});})思路和上面的一样看看代码只有2行这就是Jquery的神奇之处。感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.ddpool.cn/code/HtmlJsRun测试上述代码运行效果。希望本文所述对大家JavaScript程序设计有所帮助。
