HTML UL中的交替背景颜色

Question

我想在不使用JQuery的情况下在HTML无序列表中交替使用背景颜色.

Answer 1

最好的选择是CSS3 :nth-child选择器:

#myul li:nth-child(odd) {
    background-color: red;
}
#myul li:nth-child(even) {
    background-color: green;
}

或者如果由于某种原因你真的需要javascript解决方案:

<style>
    li.even { background-color: red; }
    li.odd { background-color: blue; }
</style>

var ul = document.getElementById('myul');
var items = ul.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
    var class = i % 2 == 0 ? 'even' : 'odd';
    items[i].className = class;
}

或者如前所述,您可以生成服务器端类.