[英]Bootstrap 3 Nav Pills Nav Tabs Dynamically loading / displaying
我创建了一个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");
});
});
});
我添加的是在创建动态标签时,它们也被赋予了淡入淡出类。 然后,当页面加载并自动选择选项卡时,或者单击选项卡时,它会删除容器div中“活动输入”中的所有类,并将“活动输入”类添加到相关的内容选项卡中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.