选项卡的多种实现方案

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

拥有星紫小气球的飞侠

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

阅读量133

点赞数 2

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

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

版权

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

最低0.47元/天解锁文章

拥有星紫小气球的飞侠

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
选项卡的多种实现方案

1.先搭结构和样式<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>选项卡</title> <style> * { margin: 0; padding: 0; } ul { list-style: none;
复制链接

扫一扫