纯css实现overflow与focus锚点选项卡切换

通过纯css实现选项卡功能（overflow：hidden滚动依旧存在，从而可以完成锚点定位，达到切换目的），采用focus锚点，避免了url锚点触动的由内到外的窗体定位；

但是纯css还是存在缺点：当选项卡在页面外时，因为采用focus锚点，所以依然会通过tab键切换选项卡；

所以，可以配合js使用，在js加载缓慢时，依旧可以操作选项卡；当js加载完毕，通过移除label的for属性，去除css的切换功能，采用控制scrollTop来完成选项卡的切换；

css与js默契配合，优化用户体验；

附源码：

boxOne与boxThree是为了使用url锚点时检验窗体的重定位而增加的，现在使用focus锚点定位解决了窗体定位的问题

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

<head>
    <meta charset="utf-8">
    <title>利用锚点实现选项卡_Pro(解决某些情况下触发页面窗体的重定向)</title>
    <style>
    a {
        text-decoration: none;
    }

    .content {
        width: 600px;
        margin: auto;
        /* outline: 1px solid pink; */
    }

    .content .box {
        height: 198px;
        overflow: hidden;
    }

    .content .box .list {
        width: 300px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        font-size: 30px;
        font-weight: 500;
        margin: auto;
        position: relative;
    }

    .content .list input {
        position: absolute;
        top: 0;
        clip: rect(0, 0, 0, 0);
        height: 100%;/*保证页面全部出现*/
        width: 1px;
        border: 0;
        padding: 0;
        margin: 0;
    }

    #one {
        background: red;
        outline: 1px solid red;
    }

    #two {
        background: orange;
        outline: 1px solid orange;
    }

    #three {
        background: yellow;
        outline: 1px solid yellow;
    }

    #four {
        background: green;
        outline: 1px solid green;
    }

    .content .link {
        text-align: center;
        margin-top: 20px;
    }

    .content .link label {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border: 1px solid #000;
    }

    .boxOne,
    .boxThree {
        height: 1000px;
        outline: 1px solid green;
    }
    </style>
</head>

<body>
    <!-- 解决窗体重定位的方式是采用focus定位，只要元素在页面内就不会触发窗体的重定位 -->
    <div class="boxOne"></div>
    <div class="content">
        <!-- 选项卡 -->
        <div class="box">
            <div class="list" id="one">
                <input id='o'>1</div>
            <div class="list" id="two">
                <input id='tw'>2</div>
            <div class="list" id="three">
                <input id='th'>3</div>
            <div class="list" id="four">
                <input id='f'>4</div>
        </div>
        <!-- 链接 -->
        <div class="link">
            <label for="o">1</label>
            <label for="tw">2</label>
            <label for="th">3</label>
            <label for="f">4</label>
        </div>
    </div>
    <div class="boxThree"></div>
    <script>
    let label = document.querySelectorAll('label');
    let box = document.querySelector('.box');
    //移除for属性，启用js完全控制选项卡的滚动
    for (let i = 0; i < label.length; i++) {
       	label[i].removeAttribute('for');
        label[i].addEventListener('click', () => {
                box.scrollTop = 200 * i;
        })
    }
    </script>
</body>

</html>

效果图：

纯css实现overflow与focus锚点选项卡切换