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

最新推荐文章于 2021-09-04 22:55:24 发布

用户名加载中......

最新推荐文章于 2021-09-04 22:55:24 发布

阅读量883

点赞数

分类专栏：前端css 文章标签： js css 选项卡

本文链接：https://blog.csdn.net/qq_39989929/article/details/89046493

版权

本文介绍了如何利用CSS的overflow: hidden和focus锚点实现选项卡切换功能，避免了URL锚点引起的窗体定位问题。同时，讨论了在JavaScript加载缓慢时，仍能通过tab键切换选项卡的策略，并在JS加载完成后，通过控制scrollTop实现更平滑的切换效果。源码和效果图可供参考。

摘要由CSDN通过智能技术生成

通过纯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;

最低0.47元/天解锁文章