js如何实现前三个和后几个的背景图不一样（如下图）

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
                var x = document.getElementsByTagName("li");
                for (var i = 0; i < x.length; i++) 
                {
                    if (x[i].getAttribute("id") <= 3)
                        $(x[i]).css("background-color", "yellow")              
                    else
                        $(x[i]).css("background-color", "red");
                }
                });
        </script>
    </head>
    <body>
    <div id="main">
       <div id="nav">
       <ul>
       <li id="1">01</li>
       <li id="2">02</li>
       <li id="3">03</li>
       <li id="4">04</li>
       <li id="5">05</li>
       </ul>
       </div>
    </div>
    </body>
    </html>
      

  2.   

    只是定位前三个。有必要用循环码
    $(document).ready(function(){
    $("ul:eq(0),:eq(1),:eq(2)").css("background-color", "red");//前三个
    $("ul:not(0),:not(1),:not(2)").css("background-color", "white");//后几个
     }）；
      

  3.   

    $("ul li").css("background-color","blue");
    $("ul li").eq(0).css("background-color","blue");
    $("ul li").eq(1).css("background-color","blue");
    $("ul li").eq(2).css("background-color","blue");
      

  4.   

    很多人都是直接用图片做背景的。。用CSS控制。
      

  5.   


    <script type="text/javascript" language="javascript">
            $(function () {
                $("ul:eq(0),:eq(1),:eq(2)").css("background-color", "red");
                $("ul:not(0),:not(1),:not(2)").css("background-color", "white");
            });
        </script>
      

  6.   

    第一种是用css进行背景图片的定位
    第二种就是用jq比较简单
    $(function(){
    $("ul li:lt(3)").addClass("bg_pic")
    })
    bg_pic就是你要设置蓝色背景图片的那个类
      

  7.   

    第二种就是用jq比较简单
    $(function(){
    $("ul li:lt(3)").addClass("bg_pic")
    })
    后几个的背景如何显示呢
      

  8.   

    $("ul li:gt(2)").addClass("bg_pic2")
      

  9.   

    $('ul li').each(function(i){
       if(i>=3){1}else{2}
    });