动态选项卡 - 每个选项卡加载多个子项答案

【问题标题】：Dynamic Tabs - Load Multiple Children PER Tab动态选项卡 - 每个选项卡加载多个子项
【发布时间】：2012-10-08 08:56:20
【问题描述】：

所以，

我正在尝试想办法将内容动态加载到多个选项卡中，其中每个选项卡可以包含从一个到多个元素（报告）的任意位置。

目前，报表是在页面加载时使用 jQuery $.load 加载的。我正在使用 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，后跟一个连字符，后跟一个 1-3 位整数（不是从 0 开始）。然后我需要将这两个字符串拆分为单独的变量并将它们注入到 API 调用中。

【问题讨论】：

您必须遍历子 div 并为每个 div 执行 ajax 调用。 $("#tab1 div").each( function() {});
这是有道理的。为此，我是否会从类似于上面链接中的方法开始，但在查找选项卡并加载其内容的函数下方放置一个嵌套的 $.each 函数？澄清..在伪代码中：
$('#myTabs').bind('show', function(e) { declare tab ID pattern and place into variable $(contentID div).each(function(){ declare pattern for report IDs parse into the load url load into that div }) $('#myTabs').tab(); }); \\reinitialize tabs 这是否仍仅限于#myTabs 容器的顶级子级？或者您是否预见到它会深入嵌套报表 div 并尝试在它们上运行顶部的 $.each 函数？

标签： javascript regex dynamic tabs twitter-bootstrap

【解决方案1】：

任何想要将多个页面加载到引导选项卡中的人都可能会发现它很有用。我能够使用一些正则表达式（特定于我的应用程序）使其工作，将 div 放置在具有元素 ID 的选项卡窗格容器中，该元素 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');
    }
});

【讨论】：