新東方前途出國(guó)咨詢有限公司是新東方旗下唯一從事出國(guó)留學(xué)服務(wù)的專職機(jī)構(gòu)。
                    
新東方前途出國(guó)咨詢有限公司立志于提供專業(yè)的國(guó)際教育服務(wù)，幫助每一位夢(mèng)想出國(guó)的學(xué)生實(shí)現(xiàn)自己的夢(mèng)想，打造成專業(yè)、權(quán)威、誠(chéng)信的留學(xué)服務(wù)旗艦品牌。
                

                

                    

                        
友情鏈接
                        
                            新東方官方網(wǎng)站
                        
                        
                            新東方在線
                        
                        
                            新東方前途出國(guó)
                                

                            
                        
                        
                            考研后留學(xué)
                        
                    
                    

                        
推廣平臺(tái)
                        
                            騰訊視頻
                        
                        
                            新浪微博
                        
                        
 
                        
 
                    
                
                

                    

                        
                            
                        
                        
                            
                        
                        
                        
                    
                    

                        
陜西新東方前途出國(guó)
                        
電話：029-87203365
                        
地址：西安市高新區(qū)林凱國(guó)際10層（科技路與高新二路
                            
         十字東南角）
                        
Copyright ? 2017-2018 陜西新東方前途出國(guó)
                    
                
            

如上所示，為全部HTML，其中id為template的就是模板引擎的模板啦，將整個(gè)表格部分都看做為模板引擎之內(nèi)的內(nèi)容，變量部分就是需要在json中寫上的內(nèi)容，關(guān)于art-template的語法，可以看art_template模板引擎渲染數(shù)據(jù)的小方法。

css 部分不多說。

JS內(nèi)容如下：

window.onload = function () {
    var data;
    $.ajax({
        dataType: "json",
        url: "data.json",
        data: data,
        type: "get",
        success: function (data, key) {
            var datas = data;
            console.log(data);
            for (var key in datas) {};
            // 專業(yè)分類點(diǎn)擊事件
            $(".majors>ul>li").hover(
                function (e) {
                    $(this).children(".mask").css("background", "rgba(0, 0, 0, .3)");
                    $(this).siblings().children(".mask").css("background", "rgba(0, 0, 0, .5)");
                },
                function (e) {
                    $(this).children(".mask").css("background", "rgba(0, 0, 0, .5)");
                    $(this).siblings().children(".mask").css("background", "rgba(0, 0, 0, .5)");
                }

            );
            $("body").on("click", ".majors>ul>li", function (e) {
                console.log("好好學(xué)習(xí)");

                console.log($(this).index());
                // 給當(dāng)前項(xiàng)的兄弟元素加上陰影，給當(dāng)前項(xiàng)去除陰影。
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
                $(this).find(".mask").css("background", "rgba(0, 0, 0, 0)");
                $(this).siblings().find(".mask").css("background", "rgba(0, 0, 0, .5)");
                //獲取當(dāng)前tab中鼠標(biāo)停在的table欄的索引  
                var majorIndex = $(this).index();
                // 取出所有數(shù)據(jù)中當(dāng)前專業(yè)類目數(shù)據(jù)
                var majorData = data[majorIndex];
                console.log(majorData);
                // 由于取出的是對(duì)象，所以遍歷key，求出它的value,并賦值給新變量
                for (var key in majorData) {
                    console.log(majorData[key]);
                    var majorDataA = majorData[key]
                }
                // 當(dāng)國(guó)家項(xiàng)被點(diǎn)擊時(shí)
                $("body").on("click", ".countries>li", function () {
                    console.log($(this));

                    $(this).siblings().removeClass("selected");
                    $(this).addClass("selected")


                    $(".articles").html("");
                    console.log("天天向上");
                    // var countryIndex=$(this).index();
                    // console.log(countryIndex);
                    // var countryData=majorData
                    // 由于json數(shù)據(jù)結(jié)構(gòu)的原因，此處不能用數(shù)組的index綁定，所以用id綁定。
                    var countryId = $(this).attr("id");
                    console.log(countryId)
                    //    得到每個(gè)國(guó)家的數(shù)據(jù)
                    var countryData = majorDataA[countryId];
                    console.log(countryData);
                    // 遍歷當(dāng)前國(guó)家項(xiàng)的數(shù)據(jù)
                    $.each(countryData, function (index, item) {
                        console.log(countryData[index]);
                        console.log(countryData[index].professional);
                        // 為國(guó)家項(xiàng)數(shù)據(jù)設(shè)置一個(gè)新變量
                        var countryDataIndex = countryData[index];
                        console.log(countryDataIndex.professional);
                        // 將國(guó)家項(xiàng)數(shù)據(jù)轉(zhuǎn)為對(duì)象
                        var OBJ = {
                            items: countryDataIndex
                        };
                        console.log(OBJ);
                        // 將對(duì)象寫入模板引擎并賦值給result變量
                        var result = template("template", OBJ);
                        console.log(countryDataIndex.university);

                        $(".articles").append(result);
                    })

                    // 設(shè)置左側(cè)色塊的的高度和右側(cè)表格的高度相等。
                    var tHeight = $("table").height();
                    console.log(tHeight);
                    var aHeight = $("aside").height();
                    console.log(aHeight);
                    var aHeight = tHeight;
                    console.log(tHeight);
                    $("aside").css("height", aHeight);


                })
                $("#Americia").trigger("click");


            })
            $(".art").trigger("click");
        }
    })

注釋上介紹的基本挺清楚啦，所以應(yīng)該沒什么需要解釋的，如果需要請(qǐng)留言。

JSON的數(shù)據(jù)，這需要自己來梳理，略復(fù)雜，我梳理后效果是這樣：

[{
        "Performance": {
            "Americia": [{
                "professional": "暫無",
                "direction": " ",
                "university": [
                    "暫無"
                ],
                "standards": [
                    "暫無"
                ],
                "project": [
                    "點(diǎn)擊了解"
                ]

            }],
            "England": [{
                "professional": "戲劇",
                "direction": " Drama",
                "university": [
                    "倫敦大學(xué)皇家霍洛威學(xué)院",
                    "?？巳卮髮W(xué)",
                    "華威大學(xué)",
                    "布里斯托大學(xué)"
                ],
                "standards": [
                    "雅思5.0，寫作5.0；
高中三年平均成績(jī)75分以上",
                    "雅思5.5，單項(xiàng)不低于5.0，
高中三年平均成績(jī)75分以上",
                    "雅思5.5，單項(xiàng)不低于5.5；
高中三年平均成績(jī)85分以上",
                    "雅思6.0，寫作5.5，其他不低于5.0；
高中三年平均成績(jī)80分以上"
                ],
                "project": [
                    "點(diǎn)擊了解"
                ]

            }],
            "Canada": [{
                "professional": "暫無",
                "direction": " ",
                "university": [
                    "暫無"
                ],
                "standards": [
                    "暫無"
                ],
                "project": [
                    "點(diǎn)擊了解"
                ]

            }],
            "Austrilia": [{
                "professional": "暫無",
                "direction": " ",
                "university": [
                    "暫無"
                ],
                "standards": [
                    "暫無"
                ],
                "project": [
                    "點(diǎn)擊了解"
                ]

            }],
            "Europe": [{
                "professional": "藝術(shù)
音樂與表演",
                "direction": " Art music 
 performance",
                "university": [
                    "意大利博洛尼亞大學(xué)，羅馬三大"
                ],
                "standards": [
                    "1. 高考文化課300分以上，高中畢業(yè)；
2. 意大利語A2水平，計(jì)劃生"
                ],
                "project": [
                    "點(diǎn)擊了解"
                ]

            }],
            "Asia": [{
                "professional": "戲劇
電影",
                "direction": "Dramas 
 Movies",
                "university": [
                    "韓國(guó)：韓國(guó)慶熙大學(xué)，韓國(guó)中央大學(xué)，韓國(guó)建國(guó)大學(xué)等"
                ],
                "standards": [
                    "1.國(guó)內(nèi)高三在讀（完成高二學(xué)業(yè)水平測(cè)試）或高中畢業(yè)（或同等學(xué)歷：中專，職高，技校），具有高中畢業(yè)證，高中藝術(shù)特長(zhǎng)；
2.韓語TOPIK三級(jí)（可在韓國(guó)語學(xué)堂完成韓語學(xué)習(xí)）；
3.表演藝術(shù)學(xué)部 : 一定量的對(duì)詞及指定表演。    "
                ],
                "project": [
                    "藝形者培訓(xùn)項(xiàng)目，境外升學(xué)輔導(dǎo)課程-點(diǎn)擊了解"
                ]

            }]

        }
    }



]

當(dāng)然這只是數(shù)組中的一條數(shù)據(jù)，其他的還有很多條，但是結(jié)構(gòu)都一樣，這里一定要多用數(shù)組類型的json，因?yàn)樾枰獙?duì)數(shù)據(jù)進(jìn)行遍歷，用對(duì)象就比較麻煩，所以我將很多數(shù)據(jù)內(nèi)容都寫成了數(shù)組，只有最底層的具體內(nèi)容才寫作對(duì)象，然后在模板引擎中調(diào)用起來很方便。另外提示一下，模板引擎自帶遍歷功能：模板引擎如何遍歷json中的數(shù)據(jù) ，所以對(duì)象中的具體內(nèi)容直接讓模板引擎遍歷就好了，不用自己造輪子。