zoukankan      html  css  js  c++  java
  • jq tab图片切换

    <div class="wrapper">
    <ul class="tab">
    <li class="tab-item active">国际大牌<span>◆</span></li>
    <li class="tab-item">国妆名牌<span>◆</span></li>
    <li class="tab-item">清洁用品<span>◆</span></li>
    <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
    <div class="main selected">
    <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
    </div>
    <div class="main">
    <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
    </div>
    <div class="main">
    <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
    </div>
    <div class="main">
    <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
    </div>
    </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(function () {
    $(".tab-item").mouseenter(function () {
    $(this).addClass("active").siblings().removeClass("active");
    var idx=$(this).index();
    $(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
    });
    });
    </script>
  • 相关阅读:
    React生命周期
    React第三次入门
    滴滴新锐面经
    前端优化
    Z-index
    maven建ssh项目的pom文件
    拦截器与过滤器的区别
    Jquery的ajax获取action中的返回值
    清空数据库所有表的数据
    orcal操作锦集
  • 原文地址:https://www.cnblogs.com/lujieting/p/10099476.html
Copyright © 2011-2022 走看看