JS选项卡如何制作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>选项卡</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            button {
                width: 50px;
                height: 50px;
            }

            .but {
                width: 200px;
                height: 80px;
                margin: auto;
            }

            #china {
                width: 500px;
                height: 300px;
                background-color: aquamarine;
                margin: auto;
                text-align: center;
            }

            #math {
                width: 500px;
                height: 300px;
                background-color: chocolate;
                margin: auto;
                text-align: center;
                display: none;
            }

            #english1 {
                width: 500px;
                height: 300px;
                background-color: cornflowerblue;
                margin: auto;
                text-align: center;
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="but">
            <button class="meau-one" onclick="fun1()"> 菜单一</button>
            <button class="meau-two" onclick="fun2()"> 菜单二</button>
            <button class="meau-three" onclick="fun4()"> 菜单三</button>
        </div>
        <div id="china">
            语文
        </div>
        <div id="math">
            数学
        </div>
        <div id="english1">
            英语
        </div>

    </body>
    <script>
        let on1 = document.getElementById("china");
        let on2 = document.getElementById("math");
        let on3 = document.getElementById("english1");

        function fun1() {
            on1.style.display = 'block';
            on2.style.display = 'none';
            on3.style.display = 'none';

        }
        function fun2() {
            on1.style.display = 'none';
            on3.style.display = 'none';
            on2.style.display = 'block';
        }
        function fun4() {
            on1.style.display = 'none';
            on2.style.display = 'none';
            on3.style.display = 'block';
        }
    </script>
</html>

上面所述是实现JS选项卡的一种方式，如果大家有其他方法，欢迎评论区讨论。

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/137247569

目录