javascript - 使用 ajax 加载选项卡内容 onclick

Question

我正在尝试学习 JS 和一些 JS 模板库，但使用它们时遇到一些困难。 我正在尝试构建一个页面，该页面将使用 ajax 从 json 文件动态加载内容，然后创建包含内容的选项卡。

JSON 文件结构类似于

"id": "0",  
"name": "Some Title",
"content": "<h1>Hello</h1>"

这是我的 html 文件:

<div class="container">
    <ul class="nav nav-tabs" id="tabsId">
        <script id="tabs-template" type="text/x-handlebars-template">
            {{#each Tabs}}
                <li data-tab-content={{Id}}><a href="#">{{Name}}</a></li>
            {{/each}}
        </script>
    </ul>
    <div id="tabsContentId">
    <script id="tabs-content-template" type="text/x-handlebars-template">
        {{#each Tabs}}
            <div class="tab-content" data-tab-content="{{Id}}">{{Content}}</div>
        {{/each}}
    </script>
    </div>
</div>

这是我的 JS:

$(function() {
    sendRequest();
});

function sendRequest () {
    $.ajax({
        url         : '../data/tabs.json',
        type        : 'GET',
        dataType    : 'json',
        success     : function( response ) {
            createTabs(response);
            createTabsContent(response);
        },
        error : function( xhr, status, errorThrown ) {
            console.log( 'ConsoleStatus: ' + status );
            console.log( 'ConsoleError: ' + errorThrown );
        },
    });
}

function createTabs( data ) {
    var templateSource  = $('#tabs-template').html(),
        template        = Handlebars.compile( templateSource ),
        tabsContainer   = template( data );
    $('#tabsId').html( tabsContainer );
}

function createTabsContent( data ) {
    var templateSource  = $('#tabs-content-template').html(),
        template        = Handlebars.compile( templateSource ),
        tabsContainer   = template( data );
    $('#tabsContentId').html( tabsContainer );
}

如何在单击时加载选项卡内容？

Answer 1

以下是有关如何操作的基本想法:

$(function() {

    $("#tabsId").on("click", "li", function(evt) {

        evt.preventDefault();
        var id = $(this).data("tabContent");
        $("#tabsContentId")
        .find(".tab-content[data-tab-content='" + id + "']").show()
        .siblings().hide();
    });
});

拿一个look at this demo完整的例子。