一个拆箱即用的滑过列表展示相应内容，并且可点击进入内容详情-优快云博客

本文链接：https://blog.youkuaiyun.com/itdashenre/article/details/139193991
话不多说直接上代码，复制到html文件即用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Showcase</title>
    <style>
        /* 样式设计 */
        .showcase {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .layer {
            width: 200px;
            height: 50px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            text-align: center;
            line-height: 50px;
            transition: background-color 0.3s ease;
            z-index: 1;
            position: relative;
        }

        .layer:hover {
            background-color: #d3d3d3;
        }

        .layer-content {
            position: absolute;
            height: 50px;
            top: 0;
            line-height: 50px;
            left: 200px;
            display: none;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            z-index: 1000;
        }

        .layer:hover .layer-content {
            display: block;
            z-index: 1000;
        }

        .image {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0, 0.3);
            display: none;
            position: absolute;
            z-index: 2;
        }

        .color {
            color: royalblue;
            cursor: pointer;
            top: 0;
            left: 0;
        }

        .file {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0, 0.3);
            display: none;
            position: absolute;
            z-index: 2;
        }

        .Computer {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0, 0.3);
            display: none;
            position: absolute;
            z-index: 2;
        }

        .del {
            position: absolute;
            top: 0;
            right: 20px;
            color: #000;
            font-size: 40px;
            cursor: pointer;
        }

        .test {
            color: #000;
            font-size: 25px;
            text-align: center;
        }

        .circle {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 20px;
            border-radius: 50%;
            display: inline-block;
            margin-top: 20px;
        }

        .color-red {
            background-color: red;
        }

        .color-green {
            background-color: green;
        }

        .layer-container {
            padding: 20px;
            border: #000 1px solid;
        }

        .pop-up {
            width: 500px;
            height: 500px;
            background-color: #fff;
            position: absolute;
            top: 10%;
            left: 33%;
        }
    </style>
</head>

<body>
    <div class="showcase">

        <div class="image test">
            <div class="pop-up">
                <div class="delimg del">x</div>
                <div>
                    这里是图片
                </div>
                <img src="../e10b24340ddbdb3a58f53c35dcd91c5.jpg" width="200px" height="200px" alt="">
            </div>
        </div>

        <div class="file test">
            <div class="pop-up">
                <div class="delfile del">x</div>
                <div>
                    这里是文件
                </div>
            </div>
        </div>

        <div class="Computer test">
            <div class="pop-up">
                <div class="delComputer del">x</div>
                <div>这里是电脑</div>
            </div>
        </div>

        <div class="layer-container">
            <div class="layer">
                Layer 1<div class="circle"></div>
                <div class="layer-content">
                    里面存放着文件 <span class="color CheckFile">查看></span>
                </div>
            </div>

            <div class="layer">
                Layer 2<div class="circle"></div>
                <div class="layer-content">
                    <div class="img">里面存放着图片 <span class="color CheckImg">查看></span></div>
                </div>
            </div>

            <div class="layer">
                Layer 3<div class="circle"></div>
                <div class="layer-content">
                    里面存放着电脑<span class="color ChecjComputer"> 查看></span>
                </div>
            </div>

            <div class="layer">
                Layer 4<div class="circle"></div>
                <div class="layer-content">
                    暂无
                </div>
            </div>

            <div>
                <div class="layer">
                    Layer 5<div class="circle"></div>
                    <div class="layer-content">
                        暂无
                    </div>
                </div>
            </div>

            <div>
                <div class="layer">
                    Layer 6<div class="circle"></div>
                    <div class="layer-content">
                        暂无
                    </div>
                </div>
            </div>

            <div>
                <div class="layer">
                    Layer 7<div class="circle"></div>
                    <div class="layer-content">
                        暂无
                    </div>
                </div>
            </div>

            <div>
                <div class="layer">
                    Layer 8<div class="circle"></div>
                    <div class="layer-content">
                        暂无
                    </div>
                </div>
            </div>

        </div>

    </div>

    <script>
        let image = document.querySelector('.image');
        let delimg = document.querySelector('.delimg');
        let CheckFile = document.querySelector('.CheckFile');
        let file = document.querySelector('.file');
        let delfile = document.querySelector('.delfile');
        let CheckImg = document.querySelector('.CheckImg');
        let ChecjComputer = document.querySelector('.ChecjComputer')
        let Computer = document.querySelector('.Computer')
        let delComputer = document.querySelector('.delComputer')
        let circle = document.querySelectorAll('.circle');
        const have = 'color-red'
        const without = 'color-green'

        const list = [
            {
                name: 'Layer 1',
                content: true
            },
            {
                name: 'Layer 2',
                content: true
            },
            {
                name: 'Layer 3',
                content: true
            },
            {
                name: 'Layer 4',
                content: false
            },
            {
                name: 'Layer 5',
                content: false
            },
            {
                name: 'Layer 6',
                content: false
            },
            {
                name: 'Layer 7',
                content: false
            },
            {
                name: 'Layer 8',
                content: false
            }
        ]

        function Store() {
            list.map((item, index) => {
                if (item.content) {
                    circle[index].classList.add(have)
                } else {
                    circle[index].classList.add(without)
                }
            })
        }

        Store()

        function delel(value) {
            value.style.display = 'none';
        }

        // 添加点击事件
        CheckFile.addEventListener('click', function () {
            file.style.display = 'block';
        })

        delfile.addEventListener('click', function () {
            delel(file)
        })

        CheckImg.addEventListener('click', function () {
            image.style.display = 'block';
        })

        delimg.addEventListener('click', function () {
            delel(image)
        })

        ChecjComputer.addEventListener('click', function () {
            Computer.style.display = 'block';
        })

        delComputer.addEventListener('click', function () {
            delel(Computer)
        })

    </script>

</body>

</html>