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.onload=$;
for(var i=0;i<Ptr.length;i++) {
      Ptr[i].onmouseover=function(){
      this.tmpClass=this.className;
      this.className = "t3";   
      };
      Ptr[i].onmouseout=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>

 

 

你可能感兴趣的:(JavaScript,function,css,float,微软)