点击tab栏切换滚动到相应位置

New globe

已于 2022-06-22 10:21:53 修改

阅读量808

点赞数

文章标签：前端 javascript css

于 2022-06-21 17:03:20 首次发布

本文链接：https://blog.csdn.net/w19981225/article/details/125394679

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <title>工作</title>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="static/css/swiper.min.css">
    <script type="text/javascript" src="static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="setting.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script src="static/js/main.js?1012"></script>
    <script src="static/js/swiper.min.js"></script>
    <script src="static/js/vue-2.3.4.js"></script>
    <script src="static/js/vconsole.min.js"></script>
    <script type="text/javascript">
        var vConsole = new VConsole();
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            padding: 20px;
            box-sizing: border-box;
        }

        .roofBox {
            background-color: #eeeeee;
            position: relative;
        }

        .navWrap {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #eeeeee;
        }

        .navTitle {
            display: flex;
            white-space: nowrap;
            overflow-y: hidden;

        }

        .navTitle::-webkit-scrollbar {
            display: none;
        }

        .navTitle li {
            display: inline-block;
            cursor: pointer;
            text-align: center;
            height: 46px;
            width: 80px;
            line-height: 52px;
            margin: 0 20px;
        }

        /*去除a标签下划线*/
        a {
            text-decoration: none;
            color: #1c80f1;
        }

        .boxWrap {
            position: fixed;
            top: 68px;
            width: 100%;
            height: 90%;
            overflow-y: auto;
            scroll-behavior: smooth;/* 锚点平滑滚动 */
        }

        .contentBox {
            margin-top: 20px;
        }

        .boxWrap::-webkit-scrollbar {
            display: none;
        }

        .contentBox li {
            list-style: none;
            height: 200px;
        }

        .navTitle li.active {
            border-bottom: 2px solid cornflowerblue;
        }
    </style>
</head>

<body class="p-application">
    <div id="app">
        <div class="wrap">
            <!-- ------------------ -->
            <div class="roofBox">
                <!-- 顶部标题 -->
                <div class="navWrap">
                    <ul class="navTitle">
                        <li :class="{'active':tabActive==0&&index==0}" v-for="(item,index) in navList"><a
                                :href="'#'+item.id">{{item.name}}</a></li>
                    </ul>
                </div>
                <!-- 标题对应内容 -->
                <div class="boxWrap">
                    <ul class="contentBox">
                        <li id="1">11111111111</li>
                        <li id="2">222222222222222</li>
                        <li id="3">3333333333333</li>
                        <li id="4">444444444444</li>
                        <li id="5">5555555555555</li>
                        <li id="6">6666666666666666</li>
                        <li id="7">77777777777777</li>
                    </ul>
                </div>
            </div>
            <!-- ---------------------- -->
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                navList: [
                    { name: "one", id: "1" },
                    { name: "tow", id: "2" },
                    { name: "three", id: "3" },
                    { name: "four", id: "4" },
                    { name: "five", id: "5" },
                    { name: "six", id: "6" },
                    { name: "seven", id: "7" },
                ],
                tabActive: 0,
            },
            created() { },
            mounted() {
                // 为类名navTitle下的所有li添加点击事件
                // $(function () { })
                $(".navTitle").on("click", "li", function () {
                    // 设置下标为当前点击的下标
                    // let index = $(this).index();
                    // console.log("index", index)
                    // 点击时为类名（active）添加样式，同时利用siblings方法清除其他同级样式
                    $(this).addClass("active").siblings().removeClass("active");
                    // 让其显示或者隐藏
                    // $(this).parents(".roofBox").find(".contentBox li").eq(index).show().siblings().hide();
                })
            },
            methods: {

            }
        });
    </script>
</body>

</html>