以编程方式创建Bootstrap选项卡

Question

我想用jQuery 2.1.4创建一些Bootstrap 3.3.5选项卡，但我并没有太多。我只能看到标题标题，而不是实际的内容。我已经制作了一个JSFiddle的相关代码。

<header class="navbar navbar-static-top"> 
    <div class="container"> 
     <nav> 
      <ul class="nav nav-tabs" id="navigtion"></ul> 
     </nav> 
    </div> 
</header> 
<div class="container-fluid"> 
    <div class="tab-content" id="tabulator"></div> 
</div> 

var categories = { 
    general: { 
     label: "General", 
     options: [{ 
      key: "opt1", 
      label: "Option 1", 
      desc: "The first option", 
      def: true 
     }, { 
      key: "opt2", 
      label: "Option 2", 
      desc: "The second option", 
      def: true 
     }] 
    }, 
    advanced: { 
     label: "Advanced", 
     options: [{ 
      key: "opt3", 
      label: "Option 3", 
      desc: "The third option", 
      def: false 
     }] 
    } 
}; 
$(function() { 
    $.each(categories, function (i, v) { 
     $("#navigtion").append("<li><a data-toggle='tab' data-target='" + i + "'>" + this.label + "</a></li>"); 
     $("#tabulator").append("<div class='tab-pane' id='" + i + "'/>"); 
     $.each(this.options, function (i2, v2) { 
      $("#" + i).append("<div class='checkbox'><label><input type='checkbox' id='" + this.key + "' title='" + this.desc + "'>" + this.label + "</label></div>"); 
     }); 
    }); 
}); 

Answer 1

1）你有一个错字：（导航在一些地方，navigtion在别人）

2）＃加入了一行：

$("#navigation").append("<li><a data-toggle='tab' 
data-target='#" + i + "'>" + this.label + "</a></li>");