js动态对选项卡(tab切换)添加内容-CSDN博客

<!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>
复制代码