jQ_Tab栏切换

来源：互联网发布：21世纪资本论知乎编辑：程序博客网时间：2024/05/22 00:53
jQ_Tab栏切换

需要引入jQuery-1.11.1.js

<!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 {            width: 1000px;            height: 475px;            margin: 0 auto;            margin-top: 100px;        }        .tab {            border: 1px solid #ddd;            border-bottom: 0;            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: 0;            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 a{            line-height: 300px;            font-size: 100px;        }        .products .main.selected {            display: block;        }        .tab li.active {            border-color: red;            border-bottom: 0;        }    </style>    <script src="../jquery-1.11.1.js"></script>    <script>        jQuery(window).ready(function () {            //需求:鼠标放到那个li上，让该li添加active类，下面的对应的.main的div添加selected            $(".tab>li").mouseenter(function () {                //不用判断，当前的li添加active类，其他的删除active类                $(this).addClass("active").siblings("li").removeClass("active");                //对应索引值的div添加selected类，其他的删除selected类                $(".products>div").eq($(this).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="###">国际大牌</a>            </div>            <div class="main">                <a href="###">国妆名牌</a>            </div>            <div class="main">                <a href="###">清洁用品</a>            </div>            <div class="main">                <a href="###">男士精品</a>            </div>        </div>    </div></body></html>
0 0