zoukankan      html  css  js  c++  java
  • jquery 淘宝案例

    <script>
    $(function () {
    $("#left>li").mouseenter(function () {
    //让center中对应下标的li显示,其他li隐藏
    var idx=$(this).index();
    $("#center>li:eq("+idx+")").show().siblings().hide();
    });
    $("#right>li").mouseenter(function () {
    var idx=$(this).index()+9;
    $("#center>li").eq(idx).show().siblings().hide();
    });
    });
    </script>
    </head>
    <body>
    <div class="wrapper">

    <ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    <li><a href="#">冬裙</a></li>
    <li><a href="#">呢大衣</a></li>
    <li><a href="#">毛衣</a></li>
    <li><a href="#">棉服</a></li>
    <li><a href="#">女裤</a></li>
    <li><a href="#">羽绒服</a></li>
    <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
    <li><a href="#"><img src="imgs/images/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/男靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="imgs/images/男包.jpg" width="200" height="250"/></a></li>

    </ul>
    <ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男靴</a></li>
    <li><a href="#">登山鞋</a></li>
    <li><a href="#">皮带</a></li>
    <li><a href="#">围巾</a></li>
    <li><a href="#">皮衣</a></li>
    <li><a href="#">男毛衣</a></li>
    <li><a href="#">男棉服</a></li>
    <li><a href="#">男包</a></li>
    </ul>

    </div>
  • 相关阅读:
    如何在服务器上添加本地驱动器
    JQ查找到带有某个字符,并起类名,然后替换这个某个字符
    使用IWMS的网站打开显示“未能加载文件或程序集”,解决方案
    表头固顶结构
    在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部
    在文档页面整个区域出现导航随内容滚动高亮显示效果
    在文档页面局部出现导航随内容滚动高亮显示效果
    在Hmtl页面中只让其中单独的一个div隐藏滚动条但是仍可滚动浏览下边的内容
    GC参考手册 —— GC 调优(工具篇)
    GC参考手册 —— GC 算法(实现篇)
  • 原文地址:https://www.cnblogs.com/lujieting/p/10099449.html
Copyright © 2011-2022 走看看