加载标签内容onclick与AJAX

我想学习JS和一些JS模板库，但我有一些使用它们的困难。我想构建一个页面，它将使用Ajax从json文件动态加载内容，然后创建带有内容的选项卡。加载标签内容onclick与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 ？

来源

2015-07-13 DieZZzz

你实际面临什么问题？ –

Atm会加载并显示所有标签和所有标签内容，但我只想显示活动标签内容。 – DieZZzz

这是一个基本的想法，如何：

$(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为一个完整的例子。

来源

2015-07-13 11:15:02 lshettyl

这就是我一整天都在看的东西！ – DieZZzz

加载标签内容onclick与AJAX

回答

相关问题