标签：
代码一：
function choose(type,color){ var lastindex=-1; var thistype=document.getElementsByTagName(type); for(var i=0;i<thistype.length;i++){ thistype[i].setAttribute("myindex",i); } for(var i=0;i<thistype.length;i++){ thistype[i].onclick=function(){ thistype[parseInt(this.getAttribute("myindex"))].style.background=color; if(lastindex==-1){ lastindex=parseInt(this.getAttribute("myindex")); }else if(lastindex==parseInt(this.getAttribute("myindex"))){ }else{ thistype[lastindex].style.background=""; lastindex=parseInt(this.getAttribute("myindex")); } } } }
这个代码是在我不知道以下方法之前自己封装的，代码比较多，所以不建议大家学习，没有充分利用js的功能和特点，这个代码是完善了的，需要改变的只有获取标签的问题，
这里我只通过标签来查找，我们可以在这个方法上继续添加代码，使其可以通过name,className查找。
分析下我的这个代码：先设置一个变量，用于存储我点击的这个对象是对应的属性值，目的是我点下次的时候将前一个对象的效果清除，第一个for循环我给每一个标签加了一个自定义属性，目的是下面点击的时候找到该标签是属于哪一个标签，第二个for循环给每个标签加一个点击事件，设置当前这个标签的背景样式，判断语句中，第一个if是将lastindex的初始值变为当前这个标签的属性值，else-if是如果上次点击的标签和这个标签是同一个，则不进行任何操作，else是将上一个标签的样式清除，比保存当前这个标签的属性值。
代码二：
var lastindex=0;
function choose(){ var thistype=document.getElementsByTagName("li"); for(var i=0;i<thistype.length;i++){ xx(i); } } function xx(i){ var thistype=document.getElementsByTagName("li"); thistype[i].onclick=function(){ thistype[i].style.background="red"; thistype[lastindex].style.background=""; lastindex=i; } }
这个方法很明显比上面的代码少很多,这里没处理的地方是当我点击的时候没有进行第一个代码的if-else判断，把上面判断的代码复制下来即可，似乎代码也不少，但是这里少了一个循环，对网页来说更优化一些，这个对刚开始学习js来说比较推荐使用，比较好理解。
代码分析：这里基本逻辑是一样的，少了添加属性的过程，第一个function主要是循环，将循环值通过传参数给第二个function，而这个i就是对应的当前的这个标签，称为标识吧
下面上第三种方法，也是我用的最多的方法。
代码三：
var lastindex=0
(function(i){ thistype[i].onclick=function(){ thistype[i].style.background="red"; thistype[lastindex].style.background=""; lastindex=i; } })(i)
先来进行代码分析:这里用到js里面的这个东西(function(){xxxx})()，似乎叫做自执行匿名函数:
1)常见格式：(function() { /* code */ })();
2)解释：包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
3)作用：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。
看到这个代码的小伙伴和第一个比较，是不是觉得瞬间少了一大截，需要添加的部分和代码二一样，上面有说明，这个是充分用到了js的特点来做的，多的不说，还不知道的小伙伴们赶紧入手吧。
这个效果是我们做网页的基本上处处都要用到的，虽然看起来比较简单，但是我们可以用在很多地方，比如QQ空间里面，我们上传的图片都是有时间轴的，在加上这个效果，我们可以做一些点击效果。
希望看到这个帖子的小伙伴们不要嫌弃我的代码，如果你们有更好的方法，千万不要藏着掖着，和大家分享分享，共同进步！！！！！！
给大家分享一个比较简单的效果，点击表格每一行变色的几种方法。。。
标签：
原文地址：http://www.cnblogs.com/huangyy/p/4541784.html
