jquery版tab切换效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            margin: ;

            padding: ;

        }

        ul {

            list-style: none;

        }

        .wrapper {

            width: 1000px;

            height: 475px;

            margin:  auto;

            margin-top: 100px;

        }

        .tab {

            border: 1px solid #ddd;

            border-bottom: ;

            height: 36px;

            width: 320px;

        }

        .tab li {

            position: relative;

            float: left;

            width: 80px;

            height: 34px;

            line-height: 34px;

            text-align: center;

            cursor: pointer;

            border-top: 4px solid #fff;

        }

        .tab span {

            position: absolute;

            right: ;

            top: 10px;

            background: #ddd;

            width: 1px;

            height: 14px;

            overflow: hidden;

        }

        .products {

            width: 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: ;

        }

    </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>
巴特西

jquery版tab切换效果

最新文章

热门文章
