main

分支 (2)

管理

管理

main

test

gao-web
/
30_操作元素对象.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>30_操作元素对象</title>
    <link rel="stylesheet" href="./css/basic.css">
    <style>
        .container {
            width: 100vw;
            height: 100vh;
        }

        .header {
            width: 100%;
            background-color: pink;
        }

        .header ul {
            display: flex;
            justify-content: space-evenly;

        }

        .header ul li {
            width: 100%;
            height: 100px;
            line-height: 100px;
            font-size: larger;
            text-align: center;
        }

        .header ul li:hover {
            color: #fff;
            background-color: coral;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <ul>
                <li index="0">首页</li>
                <li index="1">分类</li>
                <li index="2">购物袋</li>
                <li index="3">我的</li>
            </ul>
        </div>
        <div class="body">
            <span>内容</span>
        </div>
    </div>
    <script>
        let allTabs = document.querySelectorAll(".header ul li")
        let bodyDom = document.querySelector(".body")
        allTabs.forEach(dom => {
            dom.addEventListener("click", (event) => {
                // 将其他的样式都恢复正常
                // 取消其他颜色
                allTabs.forEach(item => {
                    item.style.backgroundColor = "transparent"
                    item.style.color = "#000"
                })
                event.target.style.backgroundColor = 'coral';
                event.target.style.color = '#fff';
                const flag = event.target.getAttribute("index")
                if (flag === "0") {
                    bodyDom.innerHTML = `<h1>首页</h1>`
                }
                else if (flag === "1") {
                   bodyDom.innerHTML = `<h1>分类</h1>`
                }
                else if (flag === "2") {
                   bodyDom.innerHTML = `<h1>购物袋</h1>`
                }
                else {
                   bodyDom.innerHTML = `<h1>我的</h1>`
                }
            })
        })
    </script>
</body>

</html>