js動態對選項卡(tab切換)添加內容

時間 2019-12-07
原文原文鏈接
<!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>js動態對選項卡(tab切換)添加內容</title>
    <style>
        .sqjx {
            width: 520px;
            border: 1px #333 solid;
        }

        .sqjx span {
            width: 100px;
            display: inline-block;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            background: beige;
        }

        .sqjx span.on {
            background: transparent;
        }

        .sqjx .cont {
            margin-top: 30px;
        }

        .sqjx .cont a {
            color: #333;
            display: inline-block;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="sqjx">
        <div class="tit" id="tit">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <div class="cont" id="cont">
        </div>
    </div>
    <script src="http://jiaoyu.60design.cn:8081/pZ/js/jquery.1.8.3min.js"></script>
    <script>
        $(function () {
            // 錄入須要給選項卡添加的內容 以對象數組表示:
            var sqjx =
                [
                    {
                      "zhinan": ['招生簡章', '報錄比', '報考類']
                    },
                    {
                      "academy": ['東北地區', '華東地區', '華北地區', '華南地區', '西南地區', '西北地區']
                    },
                    {
                      "subject": ['哲學', '經濟學', '法學', '教育學', '文學', '歷史學', '理學', '文學', '農學', '醫學', '軍事學', '管理學', '藝術學', '專業碩士']
                    },
                    {
                      "reference": ['考研英語', '考研政治', '考研數學', '聯考', '考研大綱']
                    },
                    {
                      "reexamine_adjust": ['考研復', '考研調', '分數', '成績查尋']
                    }
                ]

            var sqjx_methods = {
                cut: function () {
                    var cutTit = document.getElementById('tit').getElementsByTagName('span'); //獲得要切換的選項卡
                    var cont = document.getElementById('cont');//獲得選項卡切換時，對應的內容

                    // 循環數組sqjx動態給cont添加數組第一條（zhinan）內容， 給cont(全部選項卡對應的內容)  設置默認值
                    for (var x in sqjx[0]) {
                        sqjx[0][x].forEach(function (index, t) {
                            cont.innerHTML += '<a href="" title="" target="_blank">' + sqjx[0][x][t] + '</a>';
                        });
                    }
                    // 循環點擊選項卡
                    for (var i = 0; i < cutTit.length; i++) {
                        new function (i) {   //利用new function將循環的i值保存到內存中
                            cutTit[i].onclick = function () {
                                for (var j = 0; j < cutTit.length; j++) {
                                    cutTit[j].className = "";  //去除選項卡的class名
                                }
                                this.className = 'on'; //給當前點擊的選項卡，添加class名on
                                cont.innerHTML = '';//點擊時首先清空 ——>循環數組sqjx，動態給cont添加數組第一條（zhinan）內容 ——>因爲使用的是innerHTML給選項卡對應的內容依次累計追加字段，若是不清除，點擊第一個選項卡後面的全部選項卡，都會有第一個選項卡所對應的內容，因此要清空，每次點擊選項卡從新賦值；   
                                switch (i) {//判斷點擊選項卡的索引
                                    case i: { //若是點擊的是第一個，那麼下面代碼，將展現數組中的第一條zhinan,後續點擊選項卡依次對應其點擊的內容
                                        for (var x in sqjx[i]) {//循環數組sqjx的每一項
                                            sqjx[i][x].forEach(function (index, t) {//sqjx[i][x]表示循環數組每一項的鍵對應的值（數組）
                                                cont.innerHTML += '<a href="" title="" target="_blank">' + sqjx[i][x][t] + '</a>';//動態給選項卡對應的內容添加字段
                                            });
                                        }
                                    };
                                        break;
                                }
                            }
                        }(i);
                    }
                }
            }
            sqjx_methods.cut();//調用切換方法
        });
    </script>
</body>

</html>
複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。