选项卡的多种实现方案

最新推荐文章于 2021-12-10 15:33:16 发布

拥有星紫小气球的飞侠

最新推荐文章于 2021-12-10 15:33:16 发布

阅读量144

点赞数 2

分类专栏： JS案例文章标签：队列 js css asynchronous 前端

本文链接：https://blog.csdn.net/qq_41501432/article/details/116890914

版权

本文探讨了实现前端选项卡的多种方法，包括在DOM对象中添加自定义属性、闭包以及事件委托。强调了在for循环中使用闭包和let的异步编程原理，详细解释了WebAPI和EventQueue队列的角色以及事件委托作为终极解决方案的优势。

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

1.先搭结构和样式

浏览器页面呈现结果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        ul {
    
            list-style: none;
        }
        .box {
    
            width: 500px;
            margin: 20px auto;
        }
        .box .tab {
    
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            top: 1px;
        }
        .box .tab li {
    
            box-sizing: border-box;
            padding: 0 25px;
            margin-right: 15px;
            height: 35px;
            line-height: 33px;
            border: 1px solid #ccc;
            background: #ddd;
            color: #555;
            font-size: 14px;
            cursor: pointer;
        }
        .box .tab li.active {
    
            background: #fff;
            font-weight: 700;
            border-bottom-color: #fff;
        }
        .box .content div {
    
            display: none;
            box-sizing: border-box;
            padding: 15px;
            height: 200px;
            border: 1px solid #ccc;
        }
        .box .content div.active {
    
            display: block;