问题描述
所以我在 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.
这篇关于在引导中显示动态创建的选项卡内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!