動態添加tab選項卡及tab頁面內容（ajax請求json數據）

作者：mandy

---

1.實現效果

2.html部分：

  <div id="ifrContentId"></div>

3.js部分

 $(document).ready(function () {
       
        $.ajax({
            url:"./json/tab_General.json",  //tab數據存儲在json中
            type:"get",
            dataType:'json',
            success: function(data){

                     var dataList=data.data[0].subset;
                     var ifrId =  document.getElementById("ifrContentId");
                
                     for (let value of dataList) {

                         var tabName=value.name;
						//循環獲取tab名稱顯示在頁面上
                        var title="<div class='subtab"+" "+ tabName +" "+value.selected+"' name='"+value.name+"'><a href='#'>"+value.text+"</a></div>";
                         $("#tab_Gnenral").append(title);
                         //默認顯示第一個tab也內容
                         if(value.text=="tab1") {
                              var content="<div class='iframe-container"+" "+value.name+ "-iframe" +" "+value.done+"'><iframe src='"+value.href+"' height='2200'  width='800'></iframe></div>";
                             $("#ifrContentId").empty().append(content);
                         }
						
						//獲取所有tab名稱
                         var res = document.getElementsByClassName('subtab');
                         for(var i=0;i<res.length;i++){
                         //給每個tab添加click事件，點擊每個tab選項卡顯示該選項卡的頁面內容
                                 res[i].addEventListener('click',function(e){
                                     if($(this)[0].innerText==value.text) {
                                         var content = "<div class='iframe-container" + " " + value.name + "-iframe" + " " + value.done + "'><iframe height='2200'  width='800' src='" + value.href + "' ></iframe></div>";
                                         $("#ifrContentId").empty().append(content);  //empty()方法刪除匹配元素的所有子節點，解決頁面切換，內容不變的問題
                                     }
                                 }, false);
                             }
                     }          
            }
        });
    })

4.json

{
  "data": [
    {
      "name": "tab",
      "subset": [
        {
          "text": "tab1",
          "name": "overview",
          "visible": "true",
          "href": "https://www.infervision.com/zh-cn",
          "selected": "selected",
          "done": "done"
        },
        {
          "text": "tab2",
          "name": "members",
          "visible": "true",
          "href": "https://www.hao123.com/",
          "selected": "",
          "done": ""
        },
        {
          "text": "tab3",
          "name": "payments",
          "visible": "true",
          "href": "https://nodejs.org/en/docs/",
          "selected": "",
          "done": ""
        },
        {
          "text": "tab4",
          "name": "rejection",
          "visible": "true",
          "href": "https://nodejs.org/en/blog/",
          "selected": "",
          "done": ""
        },
        {
          "text": "tab5",
          "name": "diagnosis",
          "visible": "true",
          "href": "https://nodejs.org/en",
          "selected": "",
          "done": ""
        }
      ]
    }
  ]
}