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作为完整示例。

使用ajax加载选项卡内容

1 个答案: