zoukankan      html  css  js  c++  java
  • jquery版tab切换效果

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            .wrapper {
                 1000px;
                height: 475px;
                margin: 0 auto;
                margin-top: 100px;
            }
    
            .tab {
                border: 1px solid #ddd;
                border-bottom: 0;
                height: 36px;
                 320px;
            }
    
            .tab li {
                position: relative;
                float: left;
                 80px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                cursor: pointer;
                border-top: 4px solid #fff;
            }
    
            .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;
            }
    
        </style>
        <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".tab li").mouseenter(function(){
                    var $this = $(this),
                        index = $this.index();
                    $this.addClass("active").siblings("li").removeClass("active");
    
                    $(".products div").eq(index).addClass("selected").siblings("div").removeClass("selected");
                });
            });
    
            
        </script>
    </head>
    <body>
        <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>
        
    </body>
    </html>
  • 相关阅读:
    UVA 408 (13.07.28)
    linux概念之用户,组及权限
    Java实现 蓝桥杯 历届试题 网络寻路
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 约数倍数选卡片
    Java实现 蓝桥杯 历届试题 九宫重排
    Java实现 蓝桥杯 历届试题 九宫重排
  • 原文地址:https://www.cnblogs.com/sj1988/p/6755638.html
Copyright © 2011-2022 走看看