Загрузить содержимое вкладки onclick с ajax

Question

Я пытаюсь изучить JS и некоторые JS-шаблоны, но у меня есть некоторые трудности с их использованием. Я пытаюсь создать страницу, которая будет загружать динамическое содержимое из json-файла с помощью ajax, а затем создавать вкладки с контентом.

структура 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); 
} 

Как я могу загрузить содержимое вкладки OnClick ?

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 для полного примера.