简单LI标签隔行换色效果 具体出自哪里忘记了

简单LI标签隔行换色效果【转载】 具体出自哪里忘记了

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > LI标签隔行换色效果 </ title >
</ head >< body >
< style >
.mytable  { border-collapse : collapse ; border : solid #6AA70B ; border-width : 0px 0 0 0px ; width : 50% ; }
.mytable ul li  { padding-top : 5px ; text-indent : 2em ; list-style : none ; border-bottom : #6AA70B 1px dotted  ; font-family :  "Verdana,宋体" ; font-size :  12px ; color : #008000 ; text-align : left ; height : 25px ; }
.mytable ul li.t1  { background-color : #EFFEDD ; } /*  第一行的背景色  */
.mytable ul li.t2 { background-color : #ffffff ; } /*  第二行的背景色  */
.mytable ul li.t3  { background-color : #D2FCA0 ; } /*  鼠标经过时的背景色  */
</ style >
< body  style =margin:0; >< br >< br >< br >
< div  align ="center" >
< div  class =mytable  id =tab >
< ul >
     < li >< a  href ="#" > 这个是第1行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第2行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第3行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第4行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第5行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第6行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第7行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第8行的文字，大家看清楚了 </ a ></ li >
< li >< a  href ="#" > 这个是第9行的文字，大家看清楚了 </ a ></ li >
</ ul ></ div >< script  type ="text/javascript" >
<!--
var  Ptr = document.getElementById( " tab " ).getElementsByTagName( " li " );
function  $() {
       for  (i = 1 ;i < Ptr.length + 1 ;i ++ ) { 
      Ptr[i - 1 ].className  =  (i % 2 > 0 ) ? " t1 " : " t2 " ; 
      }
}
window.onload = $;
for ( var  i = 0 ;i < Ptr.length;i ++ ) {
      Ptr[i].onmouseover = function (){
       this .tmpClass = this .className;
       this .className  =   " t3 " ;    
      };
      Ptr[i].onmouseout = function (){
       this .className = this .tmpClass;
      };
}
// -->
</ script >
</ body >
</ html >