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

     1 <script>
     2  $(function(){
     3    $('.tab li').mouseenter(function(){
     4         var $this=$(this);
     5         var index=$this.index();
     6         $this.addClass('active').siblings().removeClass('active');
     7         $('.products  div').eq(index).addClass('selected').siblings().removeClass('selected');
     8    })
     9  })
    10 </script>

    html代码:

     <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>

    css代码:

       *{
                margin: 0;
                padding: 0;}
            .wrapper{
                 1000px;
                height: 475px;
                margin: 0 auto;
                margin-top: 100px;
            }
            .tab{
                border:1px solid #ddd;
                border-bottom: 0;
                height: 36px;
                 320px;
            }
            .tab li{
                list-style: none;
                float: left;
                 80px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                cursor:pointer;
                border-top: 4px solid #fff;
                position: relative;
            }
            .tab span{
                position: absolute;
                right: 0;
                top: 10px;
                background: #ddd;
                 1px;
                height: 14px;
                overflow: hidden;
            }
            .products{
                 1002px;
                border:1px solid #ddd;
                height: 476px;
            }
            .products  .main{
                float: left;
                display: none;
            }
            .products  .main.selected{
                display: block;
            }
            .tab li.active{
                border-color:red;
                border-bottom: 0;
            }
  • 相关阅读:
    iis 500
    无线密码获取
    数据库创建
    系统基础配置指令
    手把手教你用ngrx管理Angular状态
    vue中v-cloak解决刷新或者加载出现闪烁(显示变量)
    HBuilder如何与真机连接
    01 spring boot源码阅读参考
    01 git学习笔记参考
    OAuth2授权基础知识
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8167739.html
Copyright © 2011-2022 走看看