Programming

HTML 탭 구현 예제

steloflute 2021. 10. 15. 23:49
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>tabtest</title>
    <style>
        * {
            transition: all 0.5s ease;
        }

        .tab {
            display: none;
            padding: 20px;
            background-color: lightgray;
        }

        .tab-button {
            display: inline-block;
            background-color: darkgray;
            cursor: pointer;
            padding: 5px;
        }

        .tab-button:hover {
            background-color: darkgray;
        }
    </style>
</head>

<body>
    <div class=tab-button onclick="selectTab(0);">tab1</div>
    <div class=tab-button onclick="selectTab(1);">tab2</div>
    <div id="tab1" class="tab">
        hello1
    </div>
    <div id="tab2" class="tab">
        hello2
    </div>
    <script>
        function selectTab(index) {
            var tabs = document.getElementsByClassName("tab");
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].style.display = "none";
            }
            tabs[index].style.display = "block";

            var buttons = document.getElementsByClassName("tab-button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].style["background-color"] = "darkgray";
            }
            buttons[index].style["background-color"] = "lightgray";
        }
        selectTab(0);
    </script>
</body>

</html>

'Programming' 카테고리의 다른 글

JavaScript mouse trail (codepen.io)  (0) 2021.10.20
CSS revert  (0) 2021.10.20
HTML boilerplate  (0) 2021.10.15
90+ Free CSS HTML Login Form Page Templates  (0) 2021.10.15
CSS로 탭 구현하기  (0) 2021.10.13