动态添加选项卡项未按预期工作

Question

<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);
}

我是不是漏掉了什么？

Answer 1

我只使用 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+。

动态添加选项卡项未按预期工作

Add tab item dynamically not working as expected

javascript

html-framework-7