我已经创建了一个php函数,它允许jQuery为Bootstrap药丸/选项卡创建一个选项卡内容div。我可以让它动态加载数据,我只是不能让它显示下面的数据。药丸/标签他们自己显示很好,它的内容,不显示一旦我点击相关标签。触点在所需的选项卡中加载。但是没有给它一个活动类。
function BStabs($divId)
{
?>
<script>
jQuery(document).ready(function()
{
var div = '<?php echo $divId;?>';
var html = "";
html += '<div class="tab-content">';
jQuery('#'+div+' ul').each(function()
{
jQuery(this).addClass('nav nav-pills');
});
jQuery('#'+div+' ul li a').each(function()
{
jQuery(this).attr('data-toggle', 'pill');
var href = $(this).attr("data-target");
html += '<div id="'+href+'" role="tabpanel" class="tab-pane"></div>';
jQuery(this).attr('aria-controls',href);
jQuery(this).attr('role','tab');
});
html += '</div>';
jQuery('#'+div).append(html);
var first = '#'+div+' ul li:first a';
var url = $(first).attr("rel");
var href = $(first).attr("data-target");
var pane = $(first);
$('#'+href).load(url,function(result){
pane.tab('show');
});
jQuery('.nav-pills > li > a').click(function(e)
{
var url = jQuery(this).attr("rel");
var href = jQuery(this).attr("data-target");
var pane = jQuery(this);
jQuery('#'+href).load(url,function(result){
pane.tab('show');
});
});
});
</script>
<?
}
下面是我调用函数的地方:
echo "<div id='"myMessages'">";
echo "<ul>";
echo "<li><a data-target='"todos'" rel='"/URLforAJAXfunction'">A1</a></li>";
echo "<li><a data-target='"asstodos'" rel='"/URLforAJAXfunction'">A2</a></li>";
echo "</ul>";
echo "</div>";
BStabs("myMessages");
我主要从这个Bootply中改编了代码http://www.bootply.com/63891
我还添加了一个JSFiddle链接http://jsfiddle.net/9n6qLt0g/供人们玩,如果他们想。真的需要这个工作。我希望JS创建标签内容div和所有相关的子div,然后成为活动时,点击
我已经玩了一段时间了。我认为这有点麻烦,但我还是把它修好了:
JS提琴如果有人想看(改进代码)http://jsfiddle.net/daza110/9n6qLt0g/3/
jQuery(document).ready(function()
{
var div = 'myMessages';
var html = "";
html += '<div class="tab-content">';
jQuery('#'+div+' ul').each(function()
{
jQuery(this).addClass('nav nav-pills');
});
jQuery('#'+div+' ul li a').each(function()
{
jQuery(this).attr('data-toggle', 'pill');
var href = jQuery(this).attr("data-target");
html += '<div id="'+href+'" role="tabpanel" class="tab-pane fade"><p>'+href+'</p></div>';
jQuery(this).attr('aria-controls',href);
jQuery(this).attr('role','tab');
});
html += '</div>';
jQuery('#'+div).append(html);
var first = '#'+div+' ul li:first a';
var url = jQuery(first).attr("rel");
var href = jQuery(first).attr("data-target");
var pane = jQuery(first);
jQuery('#'+href).load(url,function(result){
pane.tab('show');
jQuery('#'+href).addClass("active in");
});
jQuery('.nav-pills > li > a').click(function(e)
{
jQuery('#'+div+' .tab-content > div').each(function(e)
{
jQuery(this).removeClass("active in");
});
var url = jQuery(this).attr("rel");
var href = jQuery(this).attr("data-target");
var pane = jQuery(this);
jQuery('#'+href).load(url,function(result){
pane.tab('show');
jQuery('#'+href).addClass("active in");
});
});
});
我添加的是,当创建动态选项卡时,它们也被赋予fade类。然后,当页面加载并自动选择选项卡时,或者当选项卡被单击时,它会删除容器div中"active in"的所有类,并将类"active in"添加到相关内容选项卡中。