[自用门户]三种单双背景换色方法，二和三类似

单双背景方法css一、

css部分

<script type="text/javascript"><!--  颜色判断移动过去就改变红色  -->    function test1(idd){document.getElementById(idd).style.color="red";   }function test2(idd){document.getElementById(idd).style.color="";}<!--  单双色变色方法1  -->$(document).ready(function(){  $("#list1 li:odd").css({"background-color":"#f4f7fb", "border":"#e5e5e5 1px solid"})})</script>

一和二的html部分

<div class="infolist-main bidlist"><!--style="border-top:2px #193064 solid;"注释线--><ul id="list1">   [@cms_content_page channelId=channel.id count='20' titLen='35' descLen='50' append='...' channelOption='1'  dateFormat='yyyy-MM-dd'][#list tag_list as c]<li><a id="${c_index}" href="${c.url}" title="${c.title}" onmouseover="test1(${c_index});" onmouseout="test2(${c_index});" target="_blank" ><span><!--mark注释箭头图标i class="iconfont"></i-->[@text_cut s=c.title len=titLen append=append/]</span><em>${c.date?string(dateFormat)}</em></a></li>                                                                       [#if c_index==7][/#if][/#list]</ul></div>

单双背景变色方法二、css+js

<!--css部分-->

<style type="text/css">.t1 { background:#f4f7fb; }.t2 { background:#fff; }</style>
<!--js部分-->
<!---控制换行换背景色方法2---><script type="text/javascript">          function $() {          var Ptr=document.getElementById("list1").getElementsByTagName("li");                              for (i=1;i<Ptr.length+1;i++) {               Ptr[i-1].className = (i%2>0)?"t1":"t2";               }          }        window.onload=$;</script>

<style type="text/css">.t1 { background:#f4f7fb; }.t2 { background:#fff; }</style>
<!--js部分-->
<!---控制换行换背景色方法2---><script type="text/javascript">          function $() {          var Ptr=document.getElementById("list1").getElementsByTagName("li");//这里根据id取ul的值，在得到tagname的li                              for (i=1;i<Ptr.length+1;i++) {               Ptr[i-1].className = (i%2>0)?"t1":"t2";               }          }        window.onload=$;</script>
单双背景变色方法三、在li标签加name属性，就不用取id了.css+js+html
<style type="text/css">.t1 { background:#f4f7fb; }.t2 { background:#fff; }</style>
<!--js部分-->
<!---控制换行换背景色方法2---><script type="text/javascript">          function $() {          var Ptr=document.getElementsByName("li_name");//这里根据name取设置的li_name                             for (i=1;i<Ptr.length+1;i++) {               Ptr[i-1].className = (i%2>0)?"t1":"t2";               }          }        window.onload=$;//代表立即执行此函数</script>
<!--三的html部分，修改html中li加入name属性-->
<div class="infolist-main bidlist"><!--style="border-top:2px #193064 solid;"注释线--><ul id="list1">   [@cms_content_page channelId=channel.id count='20' titLen='35' descLen='50' append='...' channelOption='1'  dateFormat='yyyy-MM-dd'][#list tag_list as c]<li name="li_name"><a id="${c_index}" href="${c.url}" title="${c.title}" onmouseover="test1(${c_index});" onmouseout="test2(${c_index});" target="_blank" ><span><!--mark注释箭头图标i class="iconfont"></i-->[@text_cut s=c.title len=titLen append=append/]</span><em>${c.date?string(dateFormat)}</em></a></li>                                                                       [#if c_index==7][/#if][/#list]</ul></div>