0
我想學習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 ?
你實際面臨什麼問題? –
Atm會加載並顯示所有標籤和所有標籤內容,但我只想顯示活動標籤內容。 – DieZZzz