tab切换，底部滑块跟随滑动pc实现tab切换，底部滑块跟随滑动的效果同时总结了classList对象中常使用的方法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 800px;
            height: 500px;
            background: mediumaquamarine;
        }

        .list {
            position: relative;
        }

        .box ul {
            font-size: 0;
        }

        .box ul li {
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
        }

        .box ul li:not(:first-child) {
            margin-left: 30px;
        }

        .slider {
            width: 24px;
            height: 4px;
            background: #985FFF;
            position: absolute;
            border-radius: 12px;
            transform: translateX(-50%);
            transition: all .2s ease-in;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="list">
            <ul>
                <li class="is-active">aaaa</li>
                <li>bbbbbb</li>
                <li>ccccccc</li>
                <li>dddddddd</li>
                <li>eeeeeeeee</li>
            </ul>
            <div class="slider"></div>
        </div>
    </div>
    <script>
        const sliderDom = document.querySelector(".slider");
        const liSet = Array.from(document.getElementsByTagName("li"));
        function cutToSetSlider(isSetSliderWidth) {
            if (liSet.length) {
                const li = liSet.find(i => i.className === "is-active");
                const { offsetLeft, offsetWidth } = li
                isSetSliderWidth && (sliderDom.style.width = offsetWidth + "px");
                sliderDom.style.left = offsetLeft + offsetWidth / 2 + 'px'
            }
        }
        cutToSetSlider(true);
        liSet.forEach(li => {
            li.onclick = function () {
                /*

                classList对象的函数
                    contains:判断类名是否存在
                    remove:删除一个或多个类名
                    item：获取指定索引的类名
                    toggle：没有指定第二个参数情况，元素类名存在，则删除类名，否则插入类名
                            指定第二个参数，为false是，删除类名，为true时，类名存在，不做任何效果，类名不存在，删除类名
                */
                const bool = this.classList.contains("is-active");
                if (bool) return;
                liSet.forEach(i => i.classList.remove("is-active"))
                this.classList.add("is-active");
                cutToSetSlider(true)
            }
        })
    </script>
</body>

</html>