在引导中显示动态创建的选项卡内容 [英] Show dynamically created tab content in bootstrap

问题描述

所以我在 bootstrap 中使用这个示例，一切都正常，但新创建的选项卡被点击，但内容从未显示。
我一直尝试在javascript中显示，但没有显示。 选项卡窗格从未切换到活动。
任何想法任何人？

So I'm creating tabs dynamically in bootstrap using this example, everything is working fine BUT the new created tab is clicked but the content is never shown. I tried everyway that exists in javascript to show it but nothing. The tab-pane is never switched to active. Any idea anyone?

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

Ps: i'm including it in richfaces page.

我的代码：

$(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'）; 返回未定义。我不知道如何解决这个问题。

I've been debugging the javascript code and it seems that $(this).tab('show'); returns Undefined. I have no idea how to fix that.

更新：
我写这个函数手动执行

Update: I wrote this function to do it manually

$(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');
            }); 
        });

但是我得到将空字符串传递给getElementById（）。为 $（target_tab_selector）.addClass（'active in'）; 。如何修复？

But I get Empty string passed to getElementById(). for the line $(target_tab_selector).addClass('active in');. How to fix it?

推荐答案

我发现我需要添加以下行的错误： if （！$（this）.hasClass（'add-contact'））
在函数的开头，因为 target_tab_selector 当我点击添加并变为空时更改。

I found the error which is I needed to add this line : if (!$(this).hasClass('add-contact')) at the beginning of the function because the target_tab_selector value changes when I click on add and become empty.

这篇关于在引导中显示动态创建的选项卡内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！