<div class="page-content">
<div class="content-block">
<div id="tab-holder" class="buttons-row">
<a href="#tab1" class="tab-link active button">Tab 1</a>
<a href="#tab2" class="tab-link button">Tab 2</a>
<a href="#tab3" class="tab-link button">Tab 3</a>
</div>
</div>
</div>
我应该如何动态添加标签?
<a href="#tab1" class="tab-link active button">Tab 1</a>
我做了这样的功能但没有工作:
function createTabButton(_holder, _text, _isActive) {
var thm = $(`<a class="tab-link button ${_isActive ? 'active' : ''}">${_text}</a>`);
_holder.append(thm);
console.log(_text);
}
我错过了什么吗?
答案 0 :(得分:0)
我只使用Dom7(framework7自己的dom操纵器),使用几乎与你相同的代码。
使用https://jsonplaceholder.typicode.com/作为示例
<div class="page-content">
<div class="content-block">
<div id="tab-holder" class="buttons-row">
<a href="#tab1" class="tab-link active button">Tab 1</a>
<a href="#tab2" class="tab-link button">Tab 2</a>
<a href="#tab3" class="tab-link button">Tab 3</a>
</div>
</div>
<button class="button">add</button>
</div>
Javascript - [使用模板字符串更新]
var myApp = new Framework7();
// Export selectors engine
var $$ = Dom7;
$$("#btnLoad").on('click', function() {
$$.ajax({
url: "https://jsonplaceholder.typicode.com/todos",
data: {
'userId': 1
},
type: 'GET',
beforeSend: function(){
$$("#btnLoad").text("Loading...");
},
success: function(data) {
var list = JSON.parse(data);
for (var i = 0; i < 5; i++) {
createTabButton($$("#tab-holder"), list[i].id, list[i].completed);
}
$$("#btnLoad").text("Tabs Added");
}
});
});
function createTabButton(_holder, _text, _isActive) {
//var thm = $$('<a class="tab-link button ' + (_isActive ? 'active' : '') + '">' + _text + '</a>');
var thm = `<a class="tab-link button ${_isActive ? 'active' : ''}">${_text}</a>`;
_holder.append(thm);
}
http://jsfiddle.net/alexprazeres11/0cwvejcx/76/
在Framework7 v1.4.2和1.6.4中测试过,它也可以在v2.0 +上运行。