Question

所以，

我正试图想出一种方法来将内容动态加载到多个标签中，其中每个标签可以包含从一个到多个元素（报告）的任何位置。

目前，使用jQuery $ .load在页面加载时加载报告。我正在使用Bootstrap和bootstrap选项卡。我找到了一个教会如何加载多个标签的网站，但没有具体说明我需要做什么。该网站位于：http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/

相比之下，每个标签的设置更像是这样：

<div id="tab1">
<div id="report1"></div>
<div id="report2"></div>
</div>

我无法使用顶级div加载内容，因为它可能有多个子级。我需要遍历div，使用正则表达式来解析ID，并在更改选项卡时加载每个报告。

我还没有想出正则表达式，但它应该相当简单 - 元素id将是这样的：“＃be78f5aa3-25”。这是一个字母数字9个字符的dbid，后跟一个hypen，然后是一个1-3位的整数（不是从0开始）。然后我需要将这两个字符串拆分为单独的变量并将它们注入API调用。

Answer 1

任何想要将多个页面加载到引导程序选项卡的人都可能会发现这一点。我能够使用一些正则表达式（特定于我的应用程序）使其工作，将div放在具有Element Id的tab-pane容器中，该ID可用于创建我想使用$ .load加载到容器中的报告。当用户转到另一个页面然后使用后退按钮时，我还为持久性选项卡添加了一些内容，如果URL中没有散列，则在第一个选项卡中加载内容的另一个条件。

我确信它可以清理干净，但你得到了要点..

$(function() {
    "use strict";
    var baseURL, $navbox;
    baseURL = window.location.protocol + "//" + window.location.hostname + "/db/";
    $navbox = $("#myTabs");
    $navbox.bind("show", function(e) {
        var contentID, pattern, selectDiv;
        pattern = /#(\Btab|tab\B)?(\Bdropdown|dropdown\B)?([1-9]{1}[0-9]*)/i;
        contentID = e.target.toString().match(pattern)[0];
        selectDiv = contentID + " > div";
        return $(selectDiv).each(function() {
            var parts = this.id.match(/(##enter regex here)/);
            if (parts) {
                $(this).load(baseURL + parts[0]);
                return;
            }
            return $("#myTabs").tab();
        });
    });
    if (window.location.hash) {
        $('#myTabs').find('a[href="'+window.location.hash+'"]').tab('show');
    }
    else { 
        var elemID = "#"+$('[class^="tab-pane active"]').attr('id') + " > div";
        $(elemID).each(function() {
            var parts = this.id.match(/(##enter regex here)/);
            $(this).load(baseURL + parts[0]);
            return $("#myTabs").tab();
        });
    }
});

$('#myTabs a').click(function (e) {
    e.preventDefault();
    var bob = jQuery(this).attr("href");
    bob = jQuery.trim(bob);
    if(bob == "" || bob == "javascript:void(0)") {
        return;
    }
    else {
        window.location.hash = $(this).attr('href');
        $(this).tab('show');
    }
});

动态标签 - 加载多个孩子的PER标签

1 个答案: