Question

我使用json格式动态生成标签和标签内容。

以下是传递json数据后生成的代码：

<ul  class="nav-tabs>
    <li class = "active">
    <a href="javascript:void(0);" data-tab-id="step3_tab_1" id="SAMPLE"><span class="icon icon-untitled"></span> DEMO</a>
    </li>
</ul>

如何将活动标签的ID设置为位于相应标签下方的下方保存按钮。

<div class="tab-content">
    <button id="" name="demo_save" type="button" class="btn">                               
        <span class="icon-floppy"></span> Save
    </button>
</div>

因此，每当标签处于活动状态时，相应活动按钮下的保存按钮将获得该标签的ID。

我该如何实现这个???

Answer 1

以下代码应该有效（如果我正确理解你）

$('li').on('click', function(){
    var id = $(this).find('a').data('tab-id');
    $('button').attr('id', id);
})

但是当您点击按钮时，您可以获得标签ID：

$('button').on('click', function(){
    var id = $('li.active').find('a').data('tab-id');
    $(this).attr('id', id);
})

Answer 2

如果您通过javascript动态生成标签，则可以使用以下代码将事件监听器添加到生成的标签中：

$(document).on('click', 'ul.nav-tabs li', function() {
    var id = $(this).find('a').data('tab-id'); // get respective tab-content's id of the tab
    $('#'+id+'.tab-content button').attr('id', id); // set the id of button in given tab-content
});

如何在javascript中为bootstrap选项卡设置id

2 个答案: