这个应用好像很广了.在wopus的评论中也可以看到这样的一个效果.隔行变换背景色.
以前的做法是偶数行时给li加一个class,方法当然不可取，如果后台读取再加class就很麻烦了.我们来看下怎么用JavaScript来实现.
我们首先定义两个CSS
<style type="text/css">
<!--
.li_bg1 { background:#FFF; }
.li_bg2 { background:#F0F; }
-->
</style>
<ul id="list1">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul>
<!--
.li_bg1 { background:#FFF; }
.li_bg2 { background:#F0F; }
-->
</style>
<ul id="list1">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul>
接下来写JS代码:
var objName= document.getElementById("list1").getElementsByTagName("li")
for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li_bg1"):(objName(i).className = "li_bg2");
}
for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li_bg1"):(objName(i).className = "li_bg2");
}
好了,现在你也可以做隔行变色的效果了,其实还有种更方便的方法就是通过WP自带的JQUERY,看下面的代码:
$(document).ready(function(){
$("#list1 li:even").addClass("li_bg2");
}
$("#list1 li:even").addClass("li_bg2");
}
一行代码就行了.是不是更简单更方便!
2009/08/15
博主请问像shawn.net那样的评论样式应该和这种隔行变色原理差不多吧,我想问一下这种样式是如何实现的,最重要的这样式两种颜色都可以单独控制的, 问问博主有什么方法实现,迫切期待中…
2009/08/15
默认的评论样式在输出的时候就有个class.只需为这个class定义一个值就行了.
2008/11/15
正好对我有用，过一踩二脚
2008/11/15
@初级鸟
偶知道,现在的是针对成员回复进行高亮显示的.我这里指的是没换主题前的那个.
2008/11/15
wopus里的评论可不是隔行变色。
那是高亮显示回复。。
2008/11/09
确实不错，收藏先
2008/11/09
不错！有时间试试！