垂直分类左右联动

已于 2023-11-17 17:54:19 修改
阅读量164 收藏
点赞数
分类专栏： js+jq 文章标签： javascript 前端 jquery
于 2023-11-17 11:37:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37103514/article/details/134459497
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/rem.js"></script>
    <style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, div { margin:0; padding:0; box-sizing: border-box;}  
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; outline: none;}  
h1, h2, h3, h4, h5, h6{ font-size:100%; }  
address, cite, dfn, em, var { font-style:normal; }  
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }  
small{ font-size:12px; }  
ul, ol { list-style:none; }  
a { text-decoration:none; }  
a:hover { text-decoration:none; }  
a:active { text-decoration: none;}
sup { vertical-align:text-top; }  
sub{ vertical-align:text-bottom; }  
legend { color:#000; }  
fieldset, img { border:0; }  
button, input, select, textarea { font-size:100%; }
body{
    width: 7.5rem;
    margin: 0 auto;
    background: #f5f5f5;
    color: #333;
    font-size: 0.24rem;
    overflow-x: hidden;
    font-family: "Microsoft YaHei", sans-serif, "PingFang SC,PingFangSC-Regular";
}
.newHeader{
    width: 100%;
    height: 0.88rem;
    background: linear-gradient(90deg, #25D36E 0%, #21B15D 100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
} 
        /* 分类 */
.classify_main{
    display: flex;
    margin-top: 0.88rem;
}
.classify_left{
    width: 1.78rem;
}
.classify_fixed{
    width: 1.78rem;
    height: calc(100% - 0.98rem);
    overflow-y: scroll;
    position: fixed;
    left: 0;
    top: 0;
    padding-top: 1.08rem;
}
.classify_item{
    width: 100%;
    height: 1rem;
    background: white;
    text-align: center;
    line-height: 1rem;
    color: #333;
    font-size: 0.28rem;
    position: relative;
}
.js_classify_itemAct{
    font-weight: bold;
    color: #22C064;
    background: #f5f5f5;
}
.js_classify_itemAct::after{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0.38rem;
    width: 0.08rem;
    height: 0.24rem;
    background: #22C064;
    border-radius: 0.04rem;
}
.classify_right{
    padding: 0 0.24rem 1.18rem 0.24rem;
}
.classify_box{
    width: 5.24rem;
    padding-top: 0.2rem;
}
.classify_box_main{
    background: white;
    border-radius: 0.3rem;
    padding-top: 0.3rem;
}
.classify_right_title{
    font-size: 0.32rem;
    line-height: 0.48rem;
    padding-left: 0.3rem;
    font-weight: bold;
}
.classify_right_list{
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem 0;
}
.classify_right_item{
    width: 1.64rem;
    height: 2.04rem;
    margin-left: 0.08rem;
}
.classify_right_logo{
    display: block;
    width: 1.08rem;
    height: 1.08rem;
    margin: 0 auto;
    border-radius: 0.2rem;
    margin-top: 0.2rem;
}
.classify_right_text{
    width: 1.56rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    color: #333;
    font-size: 0.24rem;
    line-height: 0.36rem;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
    </style>
</head>
<body style="background: #f5f5f5;">
<!-- header s -->
<div class="newHeader">
    header
</div>
<!-- header e -->
    <div class="classify_main">
        <!-- 占位别删 s -->
        <div class="classify_left"></div>
        <!-- 占位别删 e -->
        <ul class="classify_fixed">
            <li class="classify_item js_classify_itemAct">
                钱包充值
            </li>
            <li class="classify_item">
                itunes充值
            </li>
            <li class="classify_item">
                腾讯游戏
            </li>
            <li class="classify_item">
                网易游戏
            </li>
            <li class="classify_item">
                直播专区
            </li>
            <li class="classify_item">
                游戏充值
            </li>
            <li class="classify_item">
                手游代充
            </li>
            <li class="classify_item">
                视频音乐
            </li>
            <li class="classify_item">
                游戏点卡
            </li>
            <li class="classify_item">
                代购服务
            </li>
            <li class="classify_item">
                页游代充
            </li>
            <li class="classify_item">
                游戏交易
            </li>
            <li class="classify_item">
                外服游戏
            </li>
            <li class="classify_item">
                游戏加速
            </li>
            <li class="classify_item">
                社区互动
            </li>
            <li class="classify_item">
                实用工具
            </li>
            <li class="classify_item">
                宅腐最爱
            </li>
        </ul>
        <ul class="classify_right">
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">钱包充值</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">itunes充值</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">腾讯游戏</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">网易游戏</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">直播专区</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">游戏充值</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">手游代充</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">视频音乐</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">游戏点卡</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">代购服务</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">页游代充</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">游戏交易</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">外服游戏</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">游戏加速</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">社区互动</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">实用工具</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
            <li class="classify_box">
                <div class="classify_box_main">
                    <p class="classify_right_title">宅腐最爱</p>
                    <ol class="classify_right_list">
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                        <li class="classify_right_item">
                            <a class="classify_right_link" href="#">
                                <img class="classify_right_logo" src="images/newHome_goodsLogo.jpg" alt="">
                                <p class="classify_right_text">bilibibilibili钱包li钱包</p>
                            </a>
                        </li>
                    </ol>
                </div>
            </li>
        </ul>
    </div>

<!-- tabBar s -->
<ul class="tabBar_box">
    <li class="tabBar_li tabBar_liAct"><!-- tabBar_liAct 控制当前页面显示图片 -->
        <a class="tabBar_href" href="#">
            <div class="tabBar_img tabBar_home"></div>
            <p class="tabBar_title">首页</p>
        </a>
    </li>
    <li class="tabBar_li">
        <a class="tabBar_href" href="#">
            <div class="tabBar_img tabBar_classify"></div>
            <p class="tabBar_title">分类</p>
        </a>
    </li>
    <li class="tabBar_li">
        <a class="tabBar_href" href="#">
            <div class="tabBar_img tabBar_order"></div>
            <p class="tabBar_title">订单</p>
        </a>
    </li>
    <li class="tabBar_li">
        <a class="tabBar_href" href="#">
            <div class="tabBar_img tabBar_me"></div>
            <p class="tabBar_title">我的</p>
        </a>
    </li>
</ul>
<!-- tabBar e -->
    <script>
        $(function(){
            let scrollIng = true;
            var btnIng = true;
            $(".classify_fixed li").on("click", function(){
                if (btnIng) {
                    scrollIng = false
                    btnIng = false
                    let num = $(this).index();
                    let classify_top = $(".classify_box").eq(num).offset().top;
                    let topHeight = $('.newHeader').height();//导航的高度
                    let _height = $('.classify_fixed li').height();
                    $(this).addClass("js_classify_itemAct").siblings().removeClass("js_classify_itemAct");
                    $("html,body").stop().animate({scrollTop: classify_top - topHeight}, 500);
                    $('.classify_fixed').stop().animate({scrollTop:num*_height-_height*2},0);
                    let scrollTrue = function(){
                        scrollIng = true;
                    }
                    var btnTrue = function(){
                        btnIng = true;
                    }
                    setTimeout(scrollTrue,550);
                    setTimeout(btnTrue, 550);
                }
            });
            // 滚动导航显示状态跟随
            $(window).scroll(function(){
                if(scrollIng){
                    let winPos = $(window).scrollTop(); 
                    let topHeight = $('.newHeader').height();//导航的高度
                    let _height = $('.classify_fixed li').height();
                    let length = $('.classify_fixed li').length  
                    let item = new Array()
                    for ( i = 0; i <= length - 1; i++ ) {
                        item[i] = $(".classify_box").eq(i).offset().top - topHeight;// 相对偏移高度
                        $('.classify_fixed').stop().animate({scrollTop:i*_height-_height*2},0);
                        if ($(".classify_box").eq(i+1).offset()) {// 是否最后一个元素
                            item[i+1] = $(".classify_box").eq(i+1).offset().top - topHeight;
                            if (item[i+1] > winPos && winPos >= item[i]) {// 是否在第i个元素与第i+1个元素之间
                                $(".classify_fixed li").eq(i).addClass("js_classify_itemAct").siblings().removeClass("js_classify_itemAct");
                                break;
                            }
                            else if (winPos < item[i]) {// 在第一个元素之上
                                $(".classify_fixed li").eq(i).addClass("js_classify_itemAct").siblings().removeClass("js_classify_itemAct");
                                break;
                            }
                        }
                        else {//最后一个元素
                            $(".classify_fixed li").eq(i).addClass("js_classify_itemAct").siblings().removeClass("js_classify_itemAct");
                        }
                    }                
                }
            });
        })
    </script>
</body>
</html>
金翅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
水平/垂直滚动联动
jiang547860818的博客
11-15 1208
证券炒股软件经常会遇到有很多Tab要显示，使得控件的上下/垂直滚动联动经常要使用到，比如撤单，查询等业务都要用到这个控件，今天刚好项目没那么紧，就把这个控件的实现总结一下。 先看看我们实现后的效果 分析：这里我们用一个水平滑动控件HorizontalScrollView和一个ListView组合实现水平滑动和垂直滑动 一、自定义一个LinearLayout的视图容器控件，截取掉子控件的触摸监听
二级联动（分类联动）
余时的博客
10-29 727
activity布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:t...
垂直分类.
weixin_46029283的博客
08-02 384
移动端商品分类：左右独立和联动
左右联动效果
曲小强
04-29 1215
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=devic...
vue中实现左右联动的效果
08-27
Vue 中实现左右联动的效果 Vue 中实现左右联动的效果是一种常见的交互方式，在Vue框架中可以使用better-scroll库来实现滚动和点击事件的监听。下面将详细介绍如何实现左右联动的效果。 首先，需要在 Vue 组件中...
侧边分类导航联动.zip
06-03
在IT行业中，侧边分类导航联动是网页设计和前端开发中的一个重要概念，它极大地提升了用户体验，尤其是在电商网站中。这种技术使得用户在浏览商品时能够更高效地定位和筛选他们感兴趣的产品。结合“购物车”功能，...
小程序左右菜单联动效果
03-25
在小程序开发中，实现左右菜单联动效果是一种常见的交互设计，它可以提供用户更加直观的操作体验，尤其是在数据筛选、信息展示等方面。这种效果通常涉及到界面布局、事件处理和数据管理等多个技术点。下面将详细讲解...
仿饿了么、京东，左右联动列表，仿商城联动View
07-28
在Android开发中，创建仿饿了么、京东的左右联动列表是一种常见的需求，这通常用于实现类似商城的商品分类浏览功能。这种效果通过结合Java和Android的相关技术，特别是RecyclerView的使用，可以实现高效的滚动和交互...
vue左右侧联动滚动的实现代码
08-27
Vue 左右侧联动滚动的实现代码 以下是对 Vue 左右侧联动滚动的实现代码的知识点总结： 一、实现功能： 1. 点击左侧菜单，右侧滚动到相应位置 2. 滚动右侧，左侧滚动到相应位置 二、布局结构： 1. 使用 Better-...
全世界国家中英文名称以及地区区号json格式【资源】
切图仔
05-07 3951
[ { "country_id": 100006, "country_code": 244, "country_name_en": "Angola", "country_name_cn": "安哥拉", "ab": "AO" }, { "country_id": 100007, "country_code": 93, "country_name
js获取十位时间戳
切图仔
09-14 3862
【代码】js获取十位时间戳。
锚点滚动对应导航高亮显示，导航超出滚动状态跟随
切图仔
11-15 1378
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .btn{ position:fixed; right:10%; top:20%; } .btn a{ display:block; width:80px; text-align:center; color
移动端h5仿微信语音功能
切图仔
05-14 1357
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="multipart/form-data; charset=iso-8859-1"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-...
回车键发送 shift+enter 换行
切图仔
05-14 1173
$(".js_textarea").keyup(function(event){ let code = event.keyCode; let shift = event.shiftKey if(shift && code==13){ event.cancelBubble=true; event.preventDefault(); event.stopPropagation(); }else if (code==13
文本域输入框允许粘贴图片
切图仔
05-14 992
<div class="flex_textarea js_textarea" contenteditable="true" onpaste="return pasteListener(event, true)"></div> function pasteListener(event, isLimit) { $.each(event.clipboardData.items, function(index, item) { if(item.kind == "f.
文本域粘贴图片
切图仔
12-28 822
<div class="us_textArea js_text js_textarea" contenteditable="true" onpaste="return pasteListener(event, true)"></div> //文本域粘贴图片 function pasteListener(event, isLimit) { $.each(event.clipboardData.items, function(index, item) { if(
移动端通用loading
切图仔
12-18 392
<!-- js_accredit_landing_box显示隐藏 默认隐藏 --> <div class="js_accredit_landing_box"> <div class="accredit_landing_box"> <div class="accredit_landing"> <img class="accredit_landing_img" src="img/accredit_landing
在特定时间段内显示隐藏，判断日期活动是否开启结束
切图仔
04-24 339
//每月18日显示 dataTime() { let stamp = new Date().getTime(); let year = new Date().getFullYear(); let month = new Date().getMonth() + 1; let start_date = `${year}-${month}-18 00:00:00`; let end_date = `${year}-${month}-18 23:59:59`; //开始时间
mallmenu 垂直分类(左右联动)
最新发布
09-06
mallmenu 垂直分类（左右联动）是一种在商场或者购物中心中常见的分类方式。它的特点是将商品或者服务按照不同的类别进行垂直排列，并通过左右联动的方式来展示。 首先，垂直分类指的是将商品或服务按照不同的类别...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值