javascript - 以编程方式创建 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)您有一个拼写错误:(某些地方是导航，其他地方是导航)

2) 在一行中添加#:

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