Question

所以我使用此example在bootstrap中动态创建标签，一切正常但是点击了新创建的tab但内容从未显示过。我尝试了javascript中存在的所有内容，但没有任何内容。 tab-pane永远不会切换为active。任何人都不知道吗？

Ps：我将它包含在richfaces页面中。

我的代码：

$(document).on('click','#add.add-contact',function (e) {
                e.preventDefault();
                var id = $(".nav-pills").children().length; //think about it ;)
                var tabId = 'contact_0' + id;
                $(this).closest('li').before('<li><a href="#' + tabId + '" data-toggle="pill">New Tab</a></li>');
                $('.tab-content').append('<div class="tab-pane fade" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');
                $('.nav-pills li:nth-child(' + id + ') a').click();


            }); 

$(document).on('click', '#reportsDisplay.nav-pills a', function (e) {

            e.preventDefault();
            if (!$(this).hasClass('add-contact')) {
                $(this).tab('show');

            }

        })

<a4j:outputPanel styleClass="tabtable">
    <ul class="nav nav-pills" id="reportsDisplay">
        <li class="active"><a href="#contact_01" data-toggle="pill">Joe
                Smith</a></li>
        <li><a href="#contact_02" data-toggle="pill">Molly Lewis</a>
            </li>
        <li><a href="#" class="add-contact" id="add">+ Add
                Contact</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active" id="contact_01">Contact Form:
            Joe Smith</div>
        <div class="tab-pane fade" id="contact_02">Contact Form: Molly
            Lewis</div>
        </div>
</a4j:outputPanel>

更新

我一直在调试javascript代码，似乎$(this).tab('show');返回Undefined。我不知道如何解决这个问题。

更新我写了这个函数来手动完成它

$(function(){

             $(document).on('click',"#contacts.nav-pills a", function (e) {
                e.preventDefault();
                var active_tab_selector = $('.tab-content > div.active');
                var target_tab_selector = '#'+$(this).attr('href').substr(1);
                $(active_tab_selector).removeClass('active in');
                $(target_tab_selector).addClass('active in');
            }); 
        });

但我得到Empty string passed to getElementById().行$(target_tab_selector).addClass('active in');。如何解决？

Answer 1

我发现了添加此行所需的错误：if (!$(this).hasClass('add-contact')) 在函数的开头，因为当我点击target_tab_selector并变为空时add值会发生变化。

在引导程序中显示动态创建的选项卡内容

1 个答案: