制作导航 

<meta charset="utf-8" />  
<title>ajax test</title>  
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  

<style type="text/css">
    ul{ width: 100%; height: auto;}
    ul li{ float: left; width: 30%; height: 30px; background: beige;}
    .blue{ background-color: #e3f7f8;}
    .red{ background: red;}
    .yeow{ background: yellow;}
    .now{ background: #7cc7ff;}
</style>  
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=zh-CN&w=160&h=60&title=&border=&output=js"></script>
</head>  
<body>  
            <ul>
                <li class="blue">
                    <a href=" ">积木系列</a>
                </li>
                <li class="red">
                    <a href="#">过家家系列</a>
                </li>
                <li class="yeow">
                    <a href="#">女孩系列</a>
                </li>
            </ul>
<script>
    $("li").click(function(){
          index=$(this).index();
          $("li").eq(index).addClass("now").siblings().removeClass("now");
      })

</script>
</body>  
</html>

 

posted @ 2017-12-09 12:04  树叶的一生  阅读(119)  评论(0)    收藏  举报