JavaScript Tab bar switch | Tab 栏切换

Josh Z.

已于 2023-09-28 11:58:15 修改

阅读量205

点赞数 1

文章标签： javascript 开发语言 ecmascript 前端 es6

于 2023-09-28 10:46:10 首次发布

本文链接：https://blog.csdn.net/weixin_51864970/article/details/133377903

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width" />
    <title>tab bar swtich</title>
</head>
<style lang="css">
    .outline {
        width: 400px;
        border: 1px solid green;
        padding: 12px;
        background-color: antiquewhite;
    }

    .tabs {
        font-size: 16px;
    }

    .content div,
    .tabs span {
        padding: 8px;
    }

    .current {
        background-color: darkorange;
    }

    .content div {
        display: none;
    }

    .isshow {
        display: block !important;
        background-color: white;
    }
</style>

<body>
    <div class="outline" id="container">
        <div class="tabs" id="tabs">
            <span class="current">News</span>
            <span>Sports</span>
            <span>Health</span>
            <span>Weather</span>
        </div>
        <hr>
        <div class="content" id="content">
            <div class="isshow">this is News card</div>
            <div>this is Sports card</div>
            <div>this is Health card</div>
            <div>this is Weather card</div>
        </div>
    </div>

    <script type="text/javascript">
        var spans = document.getElementsByTagName("span");
        var divs = document.getElementById("content").getElementsByTagName("div");

        for (var i = 0; i < spans.length; i++) {
            spans[i].indexNum = i;
            spans[i].onclick = function () {
                for (let j = 0; j < spans.length; j++) {

                    spans[j].className = "";
                    this.className = "current";
                    divs[j].className = "";
                    divs[this.indexNum].className = "isshow";
                }
            }
            spans[i].onmouseover = function () {

                // console.log(this.indexNum);
                for (let j = 0; j < spans.length; j++) {

                    spans[j].className = "";
                    this.className = "current";
                }
            }
        }
    </script>
</body>

</html>