javascript 控制li列表隔行换色

<script src="jquery-1.3.1.js"></script>
<style>
a { text-decoration:none}
#just{border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:400px; margin:0 auto}
#just ul li {padding-top:5px;text-indent:2em;list-style:none;border-bottom:#6AA70B 1px dotted ;font-family: "微软雅黑";font-size: 14px;color:#008000;text-align:left;height:25px;}
#just ul li span{ float:right; cursor:pointer}
#just ul li.t1 {background-color:#DEEAFD;}
#just ul li.t1 a{color:#000;}
#just ul li.t2{background-color:#ffffff;}
#just ul li.t2 a{color:#ff0000;}
#just ul li.t3 {background-color:#D2FCA0;}

</style>
<div id="just">
<ul>
 <li><span>[展开]</span><a href="http://blog.csdn.com/wyodyia" target="_blank">分子如梦</a></li>
 <p>1111</p>
 <li><span>[展开]</span><a href="http://blog.csdn.com/wyodyia" target="_blank">分子如梦</a></li>
 <p>1111</p>
 <li><span>[展开]</span><a href="http://blog.csdn.com/wyodyia" target="_blank">分子如梦</a></li>
 <p>1111</p>
 <li><span>[展开]</span><a href="http://blog.csdn.com/wyodyia" target="_blank">分子如梦</a></li>
 <p>1111</p>
 <li><span>[展开]</span><a href="http://blog.csdn.com/wyodyia" target="_blank">分子如梦</a></li>
 <p>1111</p>
</ul>
</div>
<script type="text/javascript">
/*var Ptr=document.getElementById("just").getElementsByTagName("li");
function $() {
      for (i=1;i<Ptr.length+1;i++) {
      Ptr[i-1].className = (i%2>0)?"t1":"t2";
      }
}
window.οnlοad=$;
for(var i=0;i<Ptr.length;i++) {
      Ptr[i].οnmοuseοver=function(){
      this.tmpClass=this.className;
      this.className = "t3";   
      };
      Ptr[i].οnmοuseοut=function(){
      this.className=this.tmpClass;
      };
}*/
   $("#just ul  li:odd ").addClass("t1");
   $("#just ul  li:even ").addClass("t2");
 //$("#just ul  li:first "). css("background-color","#cccccc");
   $("#just ul p ").hide();
   $("#just ul li span ").click(function(){
    $("#just ul p ").slideUp();
  $(this).parent().next().slideToggle()
   });
    $("#just ul li ").mouseover(function(){
  $(this).addClass("t3");
 });
  $("#just ul li ").mouseout(function(){
  $(this).removeClass("t3");
 });
</script>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值