【JS提升】选项卡的两种实现方式

小管打天下

已于 2022-05-22 16:22:00 修改

阅读量264

点赞数

分类专栏： # JS提升文章标签： js

于 2021-07-31 17:35:10 首次发布

本文链接：https://blog.csdn.net/qq_42647547/article/details/119278967

版权

JS提升专栏收录该内容

23 篇文章 3 订阅

订阅专栏

一、选项卡的两种实现方式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            height: 500px;
            margin: 50px auto;
        }

        .tab {
            height: 50px;
        }

        .tab .item {
            float: left;
            width: 100px;
            height: 100%;
            text-align: center;
            line-height: 50px;
        }

        .tab .item.current {
            background-color: #000;
            color: #fff;
        }

        .page {
            position: relative;
            height: 450px;
            border: 1px solid #000;
        }

        .page .item {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 100px;
            text-align: center;
            line-height: 450px;
        }

        .page .item.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="tab J_tab">
            <div class="item current">选项1</div>
            <div class="item">选项2</div>
            <div class="item">选项3</div>
        </div>
        <div class="page J_page">
            <div class="item active">页面1</div>
            <div class="item">页面2</div>
            <div class="item">页面3</div>
        </div>
    </div>
</body>

</html>

（1）方法一

<script>
    ; (function (doc) {
        var oTab = doc.getElementsByClassName('J_tab')[0],
            oPage = doc.getElementsByClassName('J_page')[0],
            tabItems = oTab.getElementsByClassName('item'),
            pageItems = oPage.getElementsByClassName('item');
        var init = function () {
            bindEvent();
        }
        function bindEvent() {
            oTab.addEventListener('click', tabClick, false);
        }
        function tabClick() {
            var e = e || window.event,
                tar = e.target || e.srcElement,
                className = tar.className;
            if (className === 'item') {
                var curIdx = Array.prototype.indexOf.call(tabItems, tar);
                for (var i = 0; i < tabItems.length; i++) {
                    tabItems[i].className = 'item';
                    pageItems[i].className = 'item';
                }
                tar.className += ' current';
                pageItems[curIdx].className += ' active';
            }
        }
        init();
    })(document);
</script>

（2）方法二（不用for循环）

<script>
    ; (function (doc) {
        var oTab = doc.getElementsByClassName('J_tab')[0],
            oPage = doc.getElementsByClassName('J_page')[0],
            tabItems = oTab.getElementsByClassName('item'),
            pageItems = oPage.getElementsByClassName('item'),
            curIdx = 0;
        var init = function () {
            bindEvent();
        }
        function bindEvent() {
            oTab.addEventListener('click', tabClick, false);
        }
        function tabClick() {
            var e = e || window.event,
                tar = e.target || e.srcElement,
                className = tar.className;
            if (className === 'item') {
                tabItems[curIdx].className = 'item';
                pageItems[curIdx].className = 'item';
                curIdx = Array.prototype.indexOf.call(tabItems, tar);
                tar.className += ' current';
                pageItems[curIdx].className += ' active';
            }
        }
        init();
    })(document);
</script>

（3）优化版

<script>
    ; (function (doc) {
        var oTab = doc.getElementsByClassName('J_tab')[0],
            oPage = doc.getElementsByClassName('J_page')[0],
            tabItems = oTab.getElementsByClassName('item'),
            pageItems = oPage.getElementsByClassName('item'),
            curIdx = 0;
        var init = function () {
            bindEvent();
        }
        function bindEvent() {
            oTab.addEventListener('click', tabClick, false);
        }
        function tabClick() {
            var e = e || window.event,
                tar = e.target || e.srcElement,
                className = tar.className;
            if (className === 'item') {
                tabChange(tar);
            }
        }
        function tabChange(target) {
            tabItems[curIdx].className = 'item';
            pageItems[curIdx].className = 'item';
            curIdx = Array.prototype.indexOf.call(tabItems, target);
            tar.className += ' current';
            pageItems[curIdx].className += ' active';
        }
        init();
    })(document);
</script>