在静态网页中要使列表背景呈现间隔显示效果很容易实现,最简单最笨的方法就是给不同行设置不同的样式,但如何在动态网页中实现这样的效果呢?这种方法可以方便的实现,并且在IE及FF下都没有问题:
CSS:
.li01 { background:#fff; }
.li02 { background:#B1C4D1; }
HTML:
<ul class="list" id="list01">
<li><span class="date">日期</span> <a href="#">培训一</a> </li>
<li><span class="date">日期</span><a href="#">培训二</a></li>
<li><span class="date">日期</span><a href="#">培训三</a></li>
<li><span class="date">日期</span><a href="#">培训四</a></li>
<li><span class="date">日期</span><a href="#">培训五</a></li>
<li><span class="date">日期</span><a href="#">培训六</a></li>
</ul>
<script Language="Javascript1.2">
objName=document.getElementById("list01").getElementsByTagName("li")
for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</script>